Select

Overview

Select provides a way to create a stylized list of options for a form.

Installation

npm install @patternfly/pfe-select

Usage

There are 3 ways of providing options to your component:

• 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.

Using the <select> tag

<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>

By passing options

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

<pfe-select></pfe-select>

let pfeSelect = document.querySelector("pfe-select#options-select");
customElements.whenDefined("pfe-select").then(() => {
  pfeSelect.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

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

Attributes

invalid

Changes the color and width of border-bottom of <pfe-select>

Values

• true: Sets 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

Methods

None

Events

pfe-select:change

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

detail: {
  value: String
}

Styling hooks