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