Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@patternfly/pfe-select

Package Overview
Dependencies
1
Maintainers
16
Versions
51
Issues
File Explorer

Advanced tools

@patternfly/pfe-select

Select element for PatternFly Elements

    1.12.3latest

Version published
Maintainers
16
Yearly downloads
4,058
increased by35.63%

Weekly downloads

Readme

Source

PatternFly Element | Select Element

The select component provides a way to create list of options in a form.

There are 3 ways of providing options to your component:

  • Users can provide options using <select> element inside <pfe-select>
  • Users can pass custom options as an array of objects to the pfeOptions setter function
  • Users can append more options by using an addOptions() API

Note: pfe-select component can also be used in places where dropdowns are needed but its more suitable for forms. For dropdowns, there will be a separate component.

Usage

With <select> element:

<pfe-select> <select> <option disabled>Please select an option</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </pfe-select>

Without <select> element:

<pfe-select></pfe-select>

For custom options, use the pfeOptions setter function to set the options as shown in snippet below:

let selectWithJSOptionsOnly = document.querySelector("pfe-select"); customElements.whenDefined("pfe-select").then(() => { selectWithJSOptionsOnly.pfeOptions = [ { text: "Please select an option", value: "", selected: true }, { text: 'One', value: '1', selected: false }, { text: 'Two', value: '2', selected: false }, { text: 'Three', value: '3', selected: false} ]; });

Slots

Default slot in pfe-select

Place your <select> element with or without <option>s' here.

Attributes

invalid Changes the color and width of border-bottom of <pfe-select>. invalid is a Boolean attribute, so its presence indicates true, and its absence indicates false.

ValueDescription
trueSets the border-bottom-color to feedback--critical theme color and border-bottom-width to 2px
false (default)Sets the border-bottom-color to surface--darker theme color and border-bottom-width to default 1px

Styling

Theme hookDescriptionDefault
--pfe-select--BackgroundColorDefault <pfe-select> background color$pfe-color--ui--lightest
--pfe-select--BorderWidthDefault <pfe-select> border width$pfe-var--ui--border-width
--pfe-select--BorderBottomWidthDefault <pfe-select> border bottom width$pfe-var--ui--border-width
--pfe-select--BorderColorDefault <pfe-select> border color$pfe-color--surface--lighter
--pfe-select--BorderBottomColorDefault <pfe-select> border bottom color$pfe-color--surface--darker
--pfe-select--BorderBottomColor--hoverBorder bottom color on <pfe-select> hover$pfe-color--surface--ui-link
--pfe-select--BorderBottomColor--errorBorder bottom color on <pfe-select> error$pfe-color--feedback--critical
--pfe-select--BorderTopDefault <pfe-select> border top$pfe-var--pfe-select--BorderWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderColor
--pfe-select--BorderLeftDefault <pfe-select> border left$pfe-var--pfe-select--BorderWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderColor
--pfe-select--BorderRightDefault <pfe-select> border right$pfe-var--pfe-select--BorderWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderColor
--pfe-select--BorderBottomDefault <pfe-select> border bottom$pfe-var--pfe-select--BorderBottomWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderBottomColor
--pfe-select--BorderBottom--hoverBorder bottom on <pfe-select> hover$pfe-var--pfe-select--BorderBottomWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderBottomColor--hover
--pfe-select--BackgroundColorDefault <pfe-select> background color$pfe-color--ui--lightest
--pfe-select--ColorDefault <pfe-select> color$pfe-color--text

Events

pfe-select:change

Fires when an option is selected or deselected. The detail object contains the following

detail: { value: String }

Test

npm run test

Build

npm run build

Demo

From the PFElements root directory, run:

npm start

Code style

Select (and all PFElements) use Prettier to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can integrate your editor with Prettier to have the style rules applied on every save.

FAQs

What is @patternfly&#x2F;pfe-select?

Select element for PatternFly Elements

Is @patternfly&#x2F;pfe-select popular?

The npm package @patternfly&#x2F;pfe-select receives a total of 106 weekly downloads. As such, @patternfly&#x2F;pfe-select popularity was classified as not popular.

Is @patternfly&#x2F;pfe-select well maintained?

We found that @patternfly&#x2F;pfe-select demonstrated a healthy version release cadence and project activity. It has 16 open source maintainers collaborating on the project.

Last updated on 01 Feb 2022
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc