Skip to content
PatternFly.org Contribute on Github
PatternFly Elements
Versions v4 v3 v2 v1

Select

A select list enables users to select one or more items from a list.

Installation

We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.

For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

If you are using node and NPM, you can install this component using npm:

npm install @patternfly/elements

Then import this component into your project by using a bare module specifier:

import '@patternfly/elements/pf-select/pf-select.js';

Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.

Overview

Blue Green Magenta Orange Purple Pink Red Yellow

Installation

npm install @patternfly/elements

Usage

Single

Focus on options using arrow keys or by typing the first character of an option.

Mr Miss Mrs Ms
Dr Other
View HTML Source 
<section id="select-demo">
<pf-select placeholder="Select a title"
     accessible-label="Title">
  <pf-option>Mr</pf-option>
  <pf-option>Miss</pf-option>
  <pf-option>Mrs</pf-option>
  <pf-option>Ms</pf-option>
  <hr>
  <pf-option>Dr</pf-option>
  <pf-option>Other</pf-option>
</pf-select>
</section>

<script type="module">
import '@patternfly/elements/pf-select/pf-select.js';
</script>


<style>
#select-demo {
padding: 1em;
& pf-select {
max-width: 300px;
}
}
</style>

Single with description

Mr Miss Mrs Ms Dr Descriptions can also be HTML Other
View HTML Source 
<section id="description-demo">
<pf-select accessible-label="Title">
  <pf-option description="This is a description">Mr</pf-option>
  <pf-option description="This is a description">Miss</pf-option>
  <pf-option description="This is a description">Mrs</pf-option>
  <pf-option description="This is a description">Ms</pf-option>
  <pf-option>Dr
    <span slot="description">Descriptions can <em>also</em> be HTML</span>
  </pf-option>
  <pf-option description="This is a description">Other</pf-option>
</pf-select>
</section>

<script type="module">
import '@patternfly/elements/pf-select/pf-select.js';
</script>


<style>
#description-demo {
padding: 1em;
& pf-select {
max-width: 300px;
}
}
</style>

Grouped single

Running Stopped Down Degraded Needs maintenance
Dell Samsung Hewlett-Packard
View HTML Source 
<section id="grouped-select-demo">
<pf-select accessible-label="Status">
  <pf-option-group label="Status" key="group1">
    <pf-option value="0">Running</pf-option>
    <pf-option value="1">Stopped</pf-option>
    <pf-option value="2">Down</pf-option>
    <pf-option value="3">Degraded</pf-option>
    <pf-option value="4">Needs maintenance</pf-option>
  </pf-option-group>
  <hr>
  <pf-option-group label="Vendor names" key="group2">
    <pf-option value="5">Dell</pf-option>
    <pf-option value="6" disabled>Samsung</pf-option>
    <pf-option value="7">Hewlett-Packard</pf-option>
  </pf-option-group>
</pf-select>
</section>

<script type="module">
import '@patternfly/elements/pf-select/pf-select.js';
</script>


<style>
#grouped-select-demo {
padding: 1em;
& pf-select {
max-width: 300px;
}
}
</style>

Checkbox input

Multiple options can be selected. Any arrow keys work. Shift will toggling off multiple items. Ctrl+A will toggle selection on all items.

Active Cancelled Paused
Warning Restarted
View HTML Source 
<section id="checkbox-select-demo">
<pf-select variant="checkbox"
   accessible-label="Status"
   placeholder="Filter by status">
  <pf-option description="This is a description">Active</pf-option>
  <pf-option>Cancelled</pf-option>
  <pf-option>Paused</pf-option>
  <hr>
  <pf-option>Warning</pf-option>
  <pf-option>Restarted</pf-option>
</pf-select>
</section>

<script type="module">
import '@patternfly/elements/pf-select/pf-select.js';
</script>


<style>
#checkbox-select-demo {
padding: 1em;
max-width: 400px;
}
</style>

When setting the disabled attribute on options, they are still focusable, but they are not selectable. This is in order that they remain accessible to screen readers. This functions similarly to the aria-disabled="true" attribute.

Note: WAI-ARIA recommends elements of a larger composite widget remain focusable.

Typeahead

View HTML Source 
<section id="typeahead-demo">
  <label for="state">State</label>
  <pf-select id="state"
   variant="typeahead"
   placeholder="Select a state">
<pf-option value="Alabama"
     description="The heart of Dixie"></pf-option>
<pf-option value="Florida"
     description="The sunshine state"
     disabled></pf-option>
<pf-option value="New Jersey"></pf-option>
<pf-option value="New York"></pf-option>
<pf-option value="New Mexico"></pf-option>
<pf-option value="North Carolina"></pf-option>
  </pf-select>
</section>

<script type="module">
import '@patternfly/elements/pf-select/pf-select.js';
</script>


<style>
#typeahead-demo {
padding: 1em;
& pf-select {
max-width: 300px;
}
}
</style>

Accessibility

The select uses the Combobox Pattern recommendations from the WAI ARIA Authoring Best Practices Guide (APG).

When the dropdown is disabled it follows WAI ARIA focusability recommendations for composite widget elements, where dropdown items are still focusable even when the dropdown is disabled.

Toggle button and typeahead input

When focus is on the toggle button, the following keyboard interactions apply:

Key Function
Enter Opens the listbox.
Space Opens the listbox.
Down Arrow Opens the listbox and moves focus to the first listbox item.
Tab Moves focus out of select element onto the next focusable item and closes listbox.
Shift + Tab Moves focus out of select element onto the previous focusable item and closes listbox.

Listbox options

Listbox options use the APG's Roving tabindex recommendation. When focus is on the listbox, the following keyboard interactions apply:

Key Function
Enter Selects the options and closes the listbox.
Space Selects the options and closes the listbox.
Shift Enables multiselect.
Control + A Selects all options.
Tab Moves focus out of select element onto the next focusable options and closes listbox.
Shift + Tab Moves focus to the toggle button and closes listbox.
Up Arrow Moves focus to the previous option, optionally wrapping from the first to the last.
Down Arrow Moves focus to the next option, optionally wrapping from the last to the first.
Left Arrow Moves focus to the previous option, optionally wrapping from the first to the last.
Right Arrow Moves focus to the next option, optionally wrapping from the last to the first.
Home Moves focus to the first option in the current listbox.
End Moves focus to the last option in the current listbox.
Escape Close the listbox that contains focus and return focus to the toggle button.
Any letter Navigates to the next option that starts with the letter.

Slots on pf-select

placeholder

placeholder text for the select. Overrides the placeholder attribute.

Default Slot

insert pf-option and/or pf-option-groups here

Attributes on pf-select

variant

Variant of rendered Select

DOM Property
variant
Type
'single' | 'checkbox' | 'typeahead' | 'typeaheadmulti'
Default
'single'
accessible-label

Accessible label for the select

DOM Property
accessibleLabel
Type
string
Default
unknown
accessible-current-selections-label

Accessible label for chip group used to describe chips

DOM Property
accessibleCurrentSelectionsLabel
Type
string
Default
'Current selections'
items-selected-text

Multi listbox button text

DOM Property
itemsSelectedText
Type
string
Default
'items selected'
disabled

Whether the select is disabled

DOM Property
disabled
Type
boolean
Default
false
expanded

Whether the select listbox is expanded

DOM Property
expanded
Type
boolean
Default
false
enable-flip

Enable to flip listbox when it reaches boundary

DOM Property
enableFlip
Type
boolean
Default
false
value

Current form value

DOM Property
value
Type
string
Default
unknown
placeholder

Placeholder entry. Overridden by the placeholder slot

DOM Property
placeholder
Type
string
Default
unknown
position

Indicates initial popover position. There are 6 options: bottom, top, top-start, top-end, bottom-start, bottom-end. Default is bottom.

DOM Property
position
Type
Placement
Default
'bottom'
checkbox-selection-badge-hidden

Flag indicating if selection badge should be hidden for checkbox variant,default false

DOM Property
checkboxSelectionBadgeHidden
Type
boolean
Default
false

Methods on pf-select

show()

Opens the dropdown

hide()

Closes listbox

toggle()

toggles popup based on current state

Events on pf-select

open

when the menu toggles open

Event Type: 
unknown
close

when the menu toggles closed

Event Type: 
unknown

CSS Custom Properties on pf-select

CSS Property Description Default
--rh-color-gray-20 #e0e0e0
--pf-c-select__toggle--PaddingTop

Select toggle top padding

 var(--pf-global--spacer--form-element, 0.375rem)
--pf-c-select__toggle--PaddingRight

Select toggle right padding

 var(--pf-global--spacer--sm, 0.5rem)
--pf-c-select__toggle--PaddingBottom

Select toggle bottom padding

 var(--pf-global--spacer--form-element, 0.375rem)
--pf-c-select__toggle--PaddingLeft

Select toggle left padding

 var(--pf-global--spacer--sm, 0.5rem)
--pf-c-select__toggle--MinWidth

Select toggle minimum width

 var(--pf-global--target-size--MinWidth, 44px)
--pf-global--target-size--MinWidth 44px
--pf-c-select__toggle--FontSize

Select toggle font size

 var(--pf-global--FontSize--md, 1rem)
--pf-c-select__toggle--FontWeight

Select toggle font weight

 var(--pf-global--FontWeight--normal, 400)
--pf-c-select__toggle--LineHeight

Select toggle line height

 var(--pf-global--LineHeight--md, 1.5)
--pf-c-select__toggle--BackgroundColor

Select toggle background color

 var(--pf-global--BackgroundColor--100, #fff)
--pf-global--BackgroundColor--100 #fff
--pf-c-select__toggle--before--BorderTopWidth

Select toggle border top width

 var(--pf-global--BorderWidth--sm, 1px)
--pf-c-select__toggle--before--BorderRightWidth

Select toggle border right width

 var(--pf-global--BorderWidth--sm, 1px)
--pf-c-select__toggle--before--BorderBottomWidth

Select toggle border bottom width

 var(--pf-global--BorderWidth--sm, 1px)
--pf-c-select__toggle--before--BorderLeftWidth

Select toggle border left width

 var(--pf-global--BorderWidth--sm, 1px)
--pf-c-select__toggle--before--BorderWidth

Select toggle border width

 initial
--pf-c-select__toggle--before--BorderTopColor

Select toggle border top color

 var(--pf-global--BorderColor--300, #f0f0f0)
--pf-c-select__toggle--before--BorderRightColor

Select toggle border right color

 var(--pf-global--BorderColor--300, #f0f0f0)
--pf-c-select__toggle--before--BorderBottomColor

Select toggle border bottom color

 var(--pf-global--BorderColor--200, #8a8d90)
--pf-global--BorderColor--200 #8a8d90
--pf-c-select__toggle--before--BorderLeftColor

Select toggle border left color

 var(--pf-global--BorderColor--300, #f0f0f0)
--pf-global--BorderColor--300 #f0f0f0
--pf-c-select__toggle--Color

Select toggle text color

 var(--pf-global--Color--100, #151515)
--pf-c-select__toggle--hover--before--BorderBottomColor

Select toggle hover border bottom color

 var(--pf-global--active-color--100, #06c)
--pf-c-select__toggle--active--before--BorderBottomColor

Select toggle active border bottom color

 var(--pf-global--active-color--100, #06c)
--pf-c-select__toggle--active--before--BorderBottomWidth

Select toggle active border bottom width

 var(--pf-global--BorderWidth--md, 2px)
--pf-c-select__toggle--m-expanded--before--BorderBottomColor

Select toggle expanded border bottom color

 var(--pf-global--active-color--100, #06c)
--pf-c-select__toggle--m-expanded--before--BorderBottomWidth

Select toggle expanded border bottom width

 var(--pf-global--BorderWidth--md, 2px)
--pf-c-select__toggle--disabled--BackgroundColor

Select toggle disabled background color

 var(--pf-global--disabled-color--300, #f0f0f0)
--pf-global--disabled-color--300 #f0f0f0
--pf-c-select__toggle--m-plain--before--BorderColor

Select toggle plain border color

 transparent
--pf-c-select__toggle--m-placeholder--Color

Select toggle placeholder color

 transparent
--pf-c-select--m-invalid__toggle--before--BorderBottomColor

Select invalid state toggle border bottom color

 var(--pf-global--danger-color--100, #c9190b)
--pf-c-select--m-invalid__toggle--before--BorderBottomWidth

Select invalid state toggle border bottom width

 var(--pf-global--BorderWidth--md, 2px)
--pf-c-select--m-invalid__toggle--hover--before--BorderBottomColor

Select invalid state toggle hover border bottom color

 var(--pf-global--danger-color--100, #c9190b)
--pf-c-select--m-invalid__toggle--focus--before--BorderBottomColor

Select invalid state toggle focus border bottom color

 var(--pf-global--danger-color--100, #c9190b)
--pf-c-select--m-invalid__toggle--active--before--BorderBottomColor

Select invalid state toggle active border bottom color

 var(--pf-global--danger-color--100, #c9190b)
--pf-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor

Select invalid state toggle expanded border bottom color

 var(--pf-global--danger-color--100, #c9190b)
--pf-c-select--m-invalid__toggle-status-icon--Color

Select invalid state toggle status icon color

 var(--pf-global--danger-color--100, #c9190b)
--pf-global--danger-color--100 #c9190b
--pf-c-select--m-success__toggle--before--BorderBottomColor

Select success state toggle border bottom color

 var(--pf-global--success-color--100, #3e8635)
--pf-c-select--m-success__toggle--before--BorderBottomWidth

Select success state toggle border bottom width

 var(--pf-global--BorderWidth--md, 2px)
--pf-c-select--m-success__toggle--hover--before--BorderBottomColor

Select success state toggle hover border bottom color

 var(--pf-global--success-color--100, #3e8635)
--pf-c-select--m-success__toggle--focus--before--BorderBottomColor

Select success state toggle focus border bottom color

 var(--pf-global--success-color--100, #3e8635)
--pf-c-select--m-success__toggle--active--before--BorderBottomColor

Select success state toggle active border bottom color

 var(--pf-global--success-color--100, #3e8635)
--pf-c-select--m-success__toggle--m-expanded--before--BorderBottomColor

Select success state toggle expanded border bottom color

 var(--pf-global--success-color--100, #3e8635)
--pf-c-select--m-success__toggle-status-icon--Color

Select success state toggle status icon color

 var(--pf-global--success-color--100, #3e8635)
--pf-global--success-color--100 #3e8635
--pf-c-select--m-warning__toggle--before--BorderBottomColor

Select warning state toggle border bottom color

 var(--pf-global--warning-color--100, #f0ab00)
--pf-c-select--m-warning__toggle--before--BorderBottomWidth

Select warning state toggle border bottom width

 var(--pf-global--BorderWidth--md, 2px)
--pf-c-select--m-warning__toggle--hover--before--BorderBottomColor

Select warning state toggle hover border bottom color

 var(--pf-global--warning-color--100, #f0ab00)
--pf-c-select--m-warning__toggle--focus--before--BorderBottomColor

Select warning state toggle focus border bottom color

 var(--pf-global--warning-color--100, #f0ab00)
--pf-c-select--m-warning__toggle--active--before--BorderBottomColor

Select warning state toggle active border bottom color

 var(--pf-global--warning-color--100, #f0ab00)
--pf-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor

Select warning state toggle expanded border bottom color

 var(--pf-global--warning-color--100, #f0ab00)
--pf-c-select--m-warning__toggle-status-icon--Color

Select warning state toggle status icon color

 var(--pf-global--warning-color--100, #f0ab00)
--pf-global--warning-color--100 #f0ab00
--pf-c-select__toggle-wrapper--not-last-child--MarginRight

Select toggle wrapper not last child right margin

 var(--pf-global--spacer--xs, 0.25rem)
--pf-c-select__toggle-wrapper--MaxWidth

Select toggle wrapper maximum width

 calc(100% - var(--pf-global--spacer--lg, 1.5rem))
--pf-global--spacer--lg 1.5rem
--pf-c-select__toggle-wrapper--c-chip-group--MarginTop

Select toggle wrapper chip group top margin

 0.3125rem
--pf-c-select__toggle-wrapper--c-chip-group--MarginBottom

Select toggle wrapper chip group bottom margin

 0.3125rem
--pf-c-select__toggle-typeahead--FlexBasis

Select typeahead toggle flex basis

 10em
--pf-c-select__toggle-typeahead--BackgroundColor

Select typeahead toggle background color

 transparent
--pf-c-select__toggle-typeahead--BorderTop

Select typeahead toggle top border

 var(--pf-global--BorderWidth--sm, 1px) solid transparent
--pf-c-select__toggle-typeahead--BorderRight

Select typeahead toggle right border

 none
--pf-c-select__toggle-typeahead--BorderLeft

Select typeahead toggle left border

 none
--pf-c-select__toggle-typeahead--MinWidth

Select typeahead toggle minimum width

 7.5rem
--pf-c-select__toggle-typeahead--focus--PaddingBottom

Select typeahead toggle focus bottom padding

 calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--md))
--pf-global--spacer--form-element 0.375rem
--pf-global--BorderWidth--md 2px
--pf-c-select__toggle--m-placeholder__toggle-text--Color

Select toggle placeholder text color

 var(--pf-global--Color--dark-200, #6a6e73)
--pf-c-select__toggle-icon--toggle-text--MarginLeft

Select toggle icon left margin

 var(--pf-global--spacer--xs, 0.25rem)
--pf-c-select__toggle-badge--PaddingLeft

Select toggle badge left padding

 var(--pf-global--spacer--sm, 0.5rem)
--pf-c-select__toggle-status-icon--MarginLeft

Select toggle status icon left margin

 var(--pf-global--spacer--xs, 0.25rem)
--pf-c-select__toggle-status-icon--Color

Select toggle status icon color

 var(--pf-global--Color--100, #151515)
--pf-c-select__toggle-arrow--MarginLeft

Select toggle arrow left margin

 var(--pf-global--spacer--md, 1rem)
--pf-c-select__toggle-arrow--MarginRight

Select toggle arrow right margin

 var(--pf-global--spacer--sm, 0.5rem)
--pf-c-select__toggle-arrow--with-clear--MarginLeft

Select toggle arrow with clear left margin

 var(--pf-global--spacer--sm, 0.5rem)
--pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate

Select toggle arrow top expanded rotation

 180deg
--pf-c-select--m-plain__toggle-arrow--Color

Select plain toggle arrow color

 var(--pf-global--Color--200, #6a6e73)
--pf-c-select--m-plain--hover__toggle-arrow--Color

Select plain hover toggle arrow color

 var(--pf-global--Color--100, #151515)
--pf-c-select__toggle-clear--PaddingRight

Select toggle clear right padding

 var(--pf-global--spacer--sm, 0.5rem)
--pf-c-select__toggle-clear--PaddingLeft

Select toggle clear left padding

 var(--pf-global--spacer--md, 1rem)
--pf-c-select__toggle-clear--toggle-button--PaddingLeft

Select toggle clear button left padding

 var(--pf-global--spacer--sm, 0.5rem)
--pf-c-select__toggle-button--Color

Select toggle button text color

 var(--pf-global--Color--100, #151515)
--pf-c-select__menu--BackgroundColor

Select menu background color

 var(--pf-global--BackgroundColor--light-100, #fff)
--pf-global--BackgroundColor--light-100 #fff
--pf-c-select__menu--BoxShadow

Select menu box shadow

 var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06))
--pf-global--BoxShadow--md 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
--pf-c-select__menu--PaddingTop

Select menu top padding

 var(--pf-global--spacer--sm, 0.5rem)
--pf-c-select__menu--PaddingBottom

Select menu bottom padding

 var(--pf-global--spacer--sm, 0.5rem)
--pf-c-select__menu--Top

Select menu top position

 calc(100% + var(--pf-global--spacer--xs, 0.25rem))
--pf-c-select__menu--ZIndex

Select menu z-index

 var(--pf-global--ZIndex--sm, 200)
--pf-global--ZIndex--sm 200
--pf-c-select__menu--Width

Select menu width

 auto
--pf-c-select__menu--MinWidth

Select menu minimum width

 100%
--pf-c-select__menu--m-top--TranslateY

Select menu top transform Y

 calc(-100% - var(--pf-global--spacer--xs, 0.25rem))
--pf-c-select__list-item--m-loading--PaddingTop

Select list item loading top padding

 var(--pf-global--spacer--sm, 0.5rem)
--pf-global--spacer--2xl 3rem
--pf-c-select__menu-item--FontWeight

Select menu item font weight

 var(--pf-global--FontWeight--normal, 400)
--pf-global--LineHeight--md 1.5
--pf-c-select__menu-item--Color

Select menu item text color

 var(--pf-global--Color--dark-100, #151515)
--pf-global--Color--dark-100 #151515
--pf-c-select__menu-item--disabled--Color

Select menu item disabled text color

 var(--pf-global--Color--dark-200, #6a6e73)
--pf-c-select__menu-item--Width

Select menu item width

 100%
--pf-c-select__menu-item--hover--BackgroundColor

Select menu item hover background color

 var(--pf-global--BackgroundColor--light-300, #f0f0f0)
--pf-c-select__menu-item--focus--BackgroundColor

Select menu item focus background color

 var(--pf-global--BackgroundColor--light-300, #f0f0f0)
--pf-global--BackgroundColor--light-300 #f0f0f0
--pf-c-select__menu-item--disabled--BackgroundColor

Select menu item disabled background color

 transparent
--pf-c-select__menu-item--m-link--Width

Select menu item link width

 auto
--pf-c-select__menu-item--m-link--hover--BackgroundColor

Select menu item link hover background color

 transparent
--pf-c-select__menu-item--m-link--focus--BackgroundColor

Select menu item link focus background color

 transparent
--pf-c-select__menu-item--m-action--Color

Select menu item action color

 var(--pf-global--Color--200, #6a6e73)
--pf-c-select__menu-item--m-action--hover--Color

Select menu item action hover color

 var(--pf-global--Color--100, #151515)
--pf-c-select__menu-item--m-action--focus--Color

Select menu item action focus color

 var(--pf-global--Color--100, #151515)
--pf-c-select__menu-item--m-action--disabled--Color

Select menu item action disabled color

 var(--pf-global--disabled-color--200, #d2d2d2)
--pf-global--disabled-color--200 #d2d2d2
--pf-c-select__menu-item--m-action--Width

Select menu item action width

 auto
--pf-c-select__menu-item--m-action--FontSize

Select menu item action font size

 var(--pf-global--icon--FontSize--sm, 0.625rem)
--pf-c-select__menu-item--m-action--hover--BackgroundColor

Select menu item action hover background color

 transparent
--pf-c-select__menu-item--m-action--focus--BackgroundColor

Select menu item action focus background color

 transparent
--pf-c-select__menu-item--hover__menu-item--m-action--Color

Select menu item hover action color

 var(--pf-global--Color--200, #6a6e73)
--pf-c-select__menu-item--m-favorite-action--Color

Select menu item favorite action color

 var(--pf-global--Color--200, #6a6e73)
--pf-c-select__menu-item--m-favorite-action--hover--Color

Select menu item favorite action hover color

 var(--pf-global--Color--100, #151515)
--pf-c-select__menu-item--m-favorite-action--focus--Color

Select menu item favorite action focus color

 var(--pf-global--Color--100, #151515)
--pf-global--Color--100 #151515
--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color

Select menu wrapper favorite action color

 var(--pf-global--palette--gold-400, #f0ab00)
--pf-global--palette--gold-400 #f0ab00
--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color

Select menu wrapper favorite action hover color

 var(--pf-global--palette--gold-500, #c58c00)
--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color

Select menu wrapper favorite action focus color

 var(--pf-global--palette--gold-500, #c58c00)
--pf-global--palette--gold-500 #c58c00
--pf-c-select__menu-item--m-load--Color

Select menu item load color

 var(--pf-global--link--Color, #06c)
--pf-global--link--Color #06c
--pf-c-select__menu-item-icon--Color

Select menu item icon color

 var(--pf-global--active-color--100, #06c)
--pf-global--active-color--100 #06c
--pf-c-select__menu-item-icon--FontSize

Select menu item icon font size

 var(--pf-global--icon--FontSize--sm, 0.625rem)
--pf-global--icon--FontSize--sm 0.625rem
--pf-c-select__menu-item-icon--Right

Select menu item icon right position

 var(--pf-global--spacer--md, 1rem)
--pf-c-select__menu-item-icon--Top

Select menu item icon top position

 50%
--pf-c-select__menu-item-icon--TranslateY

Select menu item icon transform Y

 -50%
--pf-c-select__menu-item-action-icon--MinHeight

Select menu item action icon minimum height

 calc(var(--pf-c-select__menu-item--FontSize) * var(--pf-c-select__menu-item--LineHeight))
--pf-c-select__menu-item--FontSize

Select menu item font size

 var(--pf-global--FontSize--md, 1rem)
--pf-c-select__menu-item--LineHeight

Select menu item line height

 var(--pf-global--LineHeight--md, 1.5)
--pf-c-select__menu-item--match--FontWeight

Select menu item match font weight

 var(--pf-global--FontWeight--bold, 700)
--pf-global--FontWeight--bold 700
--pf-c-select__menu-search--PaddingTop

Select menu search top padding

 var(--pf-global--spacer--sm, 0.5rem)
--pf-c-select__menu-search--PaddingRight

Select menu search right padding

 var(--pf-c-select__menu-item--PaddingRight)
--pf-c-select__menu-search--PaddingBottom

Select menu search bottom padding

 var(--pf-global--spacer--md, 1rem)
--pf-c-select__menu-search--PaddingLeft

Select menu search left padding

 var(--pf-c-select__menu-item--PaddingLeft)
--pf-c-select__menu-group--menu-group--PaddingTop

Select menu group top padding

 var(--pf-global--spacer--sm, 0.5rem)
--pf-c-select__menu-group-title--PaddingTop

Select menu group title top padding

 var(--pf-c-select__menu-item--PaddingTop)
--pf-c-select__menu-item--PaddingTop

Select menu item top padding

 var(--pf-global--spacer--sm, 0.5rem)
--pf-c-select__menu-group-title--PaddingRight

Select menu group title right padding

 var(--pf-c-select__menu-item--PaddingRight)
--pf-c-select__menu-group-title--PaddingBottom

Select menu group title bottom padding

 var(--pf-c-select__menu-item--PaddingBottom)
--pf-c-select__menu-item--PaddingBottom

Select menu item bottom padding

 var(--pf-global--spacer--sm, 0.5rem)
--pf-c-select__menu-group-title--PaddingLeft

Select menu group title left padding

 var(--pf-c-select__menu-item--PaddingLeft)
--pf-c-select__menu-item--PaddingLeft

Select menu item left padding

 var(--pf-global--spacer--md, 1rem)
--pf-c-select__menu-group-title--FontSize

Select menu group title font size

 var(--pf-global--FontSize--xs, 0.75rem)
--pf-c-select__menu-group-title--FontWeight

Select menu group title font weight

 var(--pf-global--FontWeight--normal, 400)
--pf-c-select__menu-group-title--Color

Select menu group title color

 var(--pf-global--Color--dark-200, #6a6e73)
--pf-c-select__menu-item-count--MarginLeft

Select menu item count left margin

 var(--pf-global--spacer--md, 1rem)
--pf-c-select__menu-item-count--FontSize

Select menu item count font size

 var(--pf-global--FontSize--sm, 0.875rem)
--pf-global--FontSize--sm 0.875rem
--pf-c-select__menu-item-count--Color

Select menu item count color

 var(--pf-global--Color--200, #6a6e73)
--pf-c-select__menu-item--disabled__menu-item-count--Color

Select menu item disabled count color

 var(--pf-global--Color--dark-200, #6a6e73)
--pf-c-select__menu-item-description--FontSize

Select menu item description font size

 var(--pf-global--FontSize--xs, 0.75rem)
--pf-global--FontSize--xs 0.75rem
--pf-c-select__menu-item-description--Color

Select menu item description color

 var(--pf-global--Color--200, #6a6e73)
--pf-global--Color--200 #6a6e73
--pf-c-select__menu-item-description--PaddingRight

Select menu item description right padding

 var(--pf-c-select__menu-item--PaddingRight)
--pf-c-select__menu-item-main--PaddingRight

Select menu item main right padding

 var(--pf-c-select__menu-item--PaddingRight)
--pf-c-select__menu-item--PaddingRight

Select menu item right padding

 var(--pf-global--spacer--md, 1rem)
--pf-c-select__menu-item--m-selected__menu-item-main--PaddingRight

Select menu item selected main right padding

 var(--pf-c-select__menu-item--m-selected--PaddingRight)
--pf-c-select__menu-item--m-selected--PaddingRight

Select menu item selected right padding

 var(--pf-global--spacer--2xl, 3rem)
--pf-c-select__menu-footer--BoxShadow

Select menu footer box shadow

 var(--pf-global--BoxShadow--sm-top, 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16))
--pf-global--BoxShadow--sm-top 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-select__menu-footer--PaddingTop

Select menu footer top padding

 var(--pf-global--spacer--md, 1rem)
--pf-c-select__menu-footer--PaddingRight

Select menu footer right padding

 var(--pf-global--spacer--md, 1rem)
--pf-c-select__menu-footer--PaddingBottom

Select menu footer bottom padding

 var(--pf-global--spacer--md, 1rem)
--pf-c-select__menu-footer--PaddingLeft

Select menu footer left padding

 var(--pf-global--spacer--md, 1rem)
--pf-global--spacer--md 1rem
--pf-c-select__menu-footer--MarginTop

Select menu footer top margin

 var(--pf-global--spacer--sm, 0.5rem)
--pf-c-select__menu-footer--MarginBottom

Select menu footer bottom margin

 calc(var(--pf-global--spacer--sm, 0.5rem) * -1)
--pf-c-list__item-icon--Color #6a6e73
--pf-theme--color--surface--lightest #fff
--pf-global--FontFamily--sans-serif "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif
--pf-global--FontSize--md 16px
--pf-global--FontWeight--normal 400
--pf-theme--color--text #151515
--pf-theme--color--accent #0066cc
--pf-global--Color--dark-200 #6a6e73
--pf-theme--color--surface--lighter #f0f0f0
--pf-global--spacer--xs 0.25rem
--pf-global--spacer--sm 0.5rem
--pf-c-select__toggle--focus--before--BorderBottomColor

Select toggle focus border bottom color

 var(--pf-global--active-color--100, #06c)
--pf-c-select__toggle--focus--before--BorderBottomWidth

Select toggle focus border bottom width

 var(--pf-global--BorderWidth--md, 2px)
--pf-global--BorderWidth--sm 1px
--pf-c-divider--BackgroundColor —
--pf-global--BorderColor--100 #d2d2d2
--pf-c-divider--BorderColor--base —
--pf-c-divider--Height —
--pf-c-divider--BorderWidth--base —
--pf-c-divider--m-horizontal--Display —
--pf-c-divider--m-horizontal--FlexDirection —
--pf-c-divider--m-horizontal--after--Width —
--pf-c-divider--m-horizontal--after--Height —
--pf-c-divider--Display flex
--pf-c-divider--FlexDirection —
--pf-c-select-menu--c-divider--MarginTop

Select menu divider top margin

 var(--pf-global--spacer--sm, 0.5rem)
--pf-c-select-menu--c-divider--MarginBottom

Select menu divider bottom margin

 var(--pf-global--spacer--sm, 0.5rem)
--pf-c-divider--after--Width 100%
--pf-c-divider--after--Height 1px
--pf-c-divider--after--BackgroundColor —

CSS Parts on pf-select

None

Slots on pf-option-group

label

Group label. Overrides the label attribute.

Default Slot

<pf-option> or <hr> elements

Attributes on pf-option-group

label

Group description. Overridden by label slot.

DOM Property
label
Type
string
Default
unknown
disabled

whether group is disabled

DOM Property
disabled
Type
boolean
Default
false

Methods on pf-option-group

None

Events on pf-option-group

None

CSS Custom Properties on pf-option-group

CSS Property Description Default
--pf-global--BorderColor--100 #d2d2d2
--pf-theme--color--surface--lighter #f0f0f0
--pf-global--Color--200 #6a6e73
--pf-global--FontSize--xs 0.75rem
--pf-global--Color--dark-200 #6a6e73
--pf-global--spacer--md 1rem

CSS Parts on pf-option-group

None

Slots on pf-option

icon

icon optional icon

create
Default Slot

option text

description

description optional description

Attributes on pf-option

disabled

whether option is disabled

DOM Property
disabled
Type
boolean
Default
false
value

form value for this option

DOM Property
value
Type
unknown
Default
unknown
selected

whether option is selected

DOM Property
selected
Type
boolean
Default
false
active

whether option is active descendant

DOM Property
active
Type
boolean
Default
false
description

Optional option description; overridden by description slot.

DOM Property
description
Type
string
Default
''

Methods on pf-option

None

Events on pf-option

None

CSS Custom Properties on pf-option

CSS Property Description Default
--rh-color-gray-20 #e0e0e0
--pf-global--spacer--sm 0.5rem
--pf-global--spacer--md 1rem
--pf-theme--color--surface--lighter #f0f0f0
--pf-c-select__menu-item-icon--FontSize var(--pf-global--icon--FontSize--sm, 0.675rem)
--pf-global--icon--FontSize--sm 0.675rem
--pf-theme--color--accent #0066cc
--pf-global--FontSize--xs 0.75rem
--pf-global--Color--dark-200 #6a6e73

CSS Parts on pf-option

None

© 2018-2025 Red Hat, Inc. Deploys by Netlify