PatternFly Elements - Home PatternFly Elements

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:

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 options setter function to set the options as shown in snippet below:

<pfe-select></pfe-select>
const pfeSelect = document.querySelector("pfe-select#options-select");
pfeSelect.options = [
  { 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>.

When present, sets the border-bottom-color to feedback--critical theme color and border-bottom-width to 2px When absent, sets the border-bottom-color to surface--darker theme color and border-bottom-width to default 1px

DOM Property
invalid
Type
boolean
Default
false

DOM Properties

options
Type
PfeOption[]|null | undefined
Default
unknown
value

The selected value

Type
unknown
Default
unknown

Deprecated DOM Properties
pfeOptions
Note: pfeOptions is deprecated.

Use options
Type
PfeOption[]|null
Default
unknown

Methods

addOptions(options: PfeOption[])

Reset the options by concatenating newly added options with previous options

Events

select

When an item is selected.

Event Type: 
SelectChangeEvent

Deprecated Events
pfe-select:change

The detail object contains the selected value - a string

Note: pfe-select:change is deprecated.

Use select

 Event Type: 
CustomEvent<{ value: string }>

CSS Custom Properties

CSS Property Description Default
--pfe-select--BackgroundColor

Default <pfe-select> background color

 $pfe-color--ui--lightest
--pfe-select--BorderWidth

Default <pfe-select> border width

 $pfe-var--ui--border-width
--pfe-select--BorderBottomWidth

Default <pfe-select> border bottom width

 $pfe-var--ui--border-width
--pfe-select--BorderColor

Default <pfe-select> border color

 $pfe-color--surface--lighter
--pfe-select--BorderBottomColor

Default <pfe-select> border bottom color

 $pfe-color--surface--darker
--pfe-select--BorderBottomColor--hover

Border bottom color on <pfe-select> hover

 $pfe-color--surface--ui-link
--pfe-select--BorderBottomColor--error

Border bottom color on <pfe-select> error

 $pfe-color--feedback--critical
--pfe-select--BorderTop

Default <pfe-select> border top

 $pfe-var--pfe-select--BorderWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderColor
--pfe-select--BorderLeft

Default <pfe-select> border left

 $pfe-var--pfe-select--BorderWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderColor
--pfe-select--BorderRight

Default <pfe-select> border right

 $pfe-var--pfe-select--BorderWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderColor
--pfe-select--BorderBottom

Default <pfe-select> border bottom

 $pfe-var--pfe-select--BorderBottomWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderBottomColor
--pfe-select--BorderBottom--hover

Border bottom on <pfe-select> hover

 $pfe-var--pfe-select--BorderBottomWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderBottomColor--hover
--pfe-select--BackgroundColor

Default <pfe-select> background color {@default $pfe-color--ui--lightest}

 —
--pfe-select--Color

Default <pfe-select> color

 $pfe-color--text

CSS Shadow Parts

None