Skip to content
Patternfly Logo

Select

A select list enables users to select one or more items from a list. Use a select list when options are dynamic or variable.

A newer React implementation of the select will replace the existing implementation at the next major release. The documentation for the newer implementation is under the React next tab, and this newer implementation can be imported from @patternfly/react-core/next.

Info alert:Beta feature

This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.

Examples

Single

Grouped single

Checkbox

Typeahead

Multiple Typeahead

Props

Select

*required
NameTypeDefaultDescription
togglerequired(toggleRef: React.RefObject<any>) => React.ReactNodeRenderer for a custom select toggle. Forwards a ref to the toggle.
childrenReact.ReactNodeAnything which can be rendered in a select
classNamestringClasses applied to root element of select
isOpenbooleanFlag to indicate if select is open
isPlainbooleanIndicates if the select should be without the outer box-shadow
minWidthstringMinimum width of the select menu
onOpenChange(isOpen: boolean) => voidCallback to allow the select component to change the open state of the menu. Triggered by clicking outside of the menu, or by pressing either tab or escape.
onSelect(event?: React.MouseEvent<Element, MouseEvent>, itemId?: string | number) => voidFunction callback when user selects an option.
selectedany | any[]Single itemId for single select menus, or array of itemIds for multi select. You can also specify isSelected on the SelectOption.
zIndexnumberz-index of the select menu

SelectGroup

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeAnything which can be rendered in a select group
classNamestringClasses applied to root element of select group
labelstringLabel of the select group

SelectOption

*required
NameTypeDefaultDescription
childrenReact.ReactNodeAnything which can be rendered in a select option
classNamestringClasses applied to root element of select option
hasCheckbooleanIndicates the option has a checkbox
isDisabledbooleanIndicates the option is disabled
isFocusedbooleanIndicates the option is focused
isSelectedbooleanIndicates the option is selected
itemIdanyIdentifies the component in the Select onSelect callback

SelectList

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeAnything which can be rendered in a select list
classNamestringClasses applied to root element of select list

CSS variables

.pf-c-menu--pf-global--Color--100
#151515
.pf-c-menu--pf-global--Color--200
#6a6e73
.pf-c-menu--pf-global--BorderColor--100
#d2d2d2
.pf-c-menu--pf-global--primary-color--100
#06c
.pf-c-menu--pf-global--link--Color
#06c
.pf-c-menu--pf-global--link--Color--hover
#004080
.pf-c-menu--pf-global--BackgroundColor--100
#fff
.pf-c-menu--pf-c-menu--BackgroundColor
#fff
.pf-c-menu--pf-c-menu--BoxShadow
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-menu--pf-c-menu--MinWidth
auto
.pf-c-menu--pf-c-menu--Width
auto
.pf-c-menu--pf-c-menu--ZIndex
200
.pf-c-menu--pf-c-menu--Top
auto
.pf-c-menu--pf-c-menu--m-flyout__menu--Top
calc(0.5rem * -1 + 0px)
.pf-c-menu--pf-c-menu--m-flyout__menu--Right
auto
.pf-c-menu--pf-c-menu--m-flyout__menu--Bottom
auto
.pf-c-menu--pf-c-menu--m-flyout__menu--Left
calc(100% + 0px)
.pf-c-menu--pf-c-menu--m-flyout__menu--m-top--Bottom
calc(0.5rem * -1)
.pf-c-menu--pf-c-menu--m-flyout__menu--m-left--Right
calc(100% + 0px)
.pf-c-menu--pf-c-menu--m-plain--BoxShadow
none
.pf-c-menu--pf-c-menu--m-flyout__menu--top-offset
0px
.pf-c-menu--pf-c-menu--m-flyout__menu--left-offset
0px
.pf-c-menu--pf-c-menu--m-flyout__menu--m-left--right-offset
0px
.pf-c-menu--pf-c-menu__content--Height
auto
.pf-c-menu--pf-c-menu__content--MaxHeight
none
.pf-c-menu--pf-c-menu--m-scrollable__content--MaxHeight
18.75rem
.pf-c-menu--pf-c-menu--c-divider--MarginTop
0
.pf-c-menu--pf-c-menu--c-divider--MarginBottom
0
.pf-c-menu--pf-c-menu__list--c-divider--MarginTop
0.5rem
.pf-c-menu--pf-c-menu__list--c-divider--MarginBottom
0.5rem
.pf-c-menu--pf-c-menu__header--PaddingTop
1rem
.pf-c-menu--pf-c-menu__header--PaddingRight
1rem
.pf-c-menu--pf-c-menu__header--PaddingBottom
1rem
.pf-c-menu--pf-c-menu__header--PaddingLeft
1rem
.pf-c-menu--pf-c-menu__header--c-menu__item--MarginTop
calc(1rem * -1 / 2)
.pf-c-menu--pf-c-menu__header--c-menu__item--MarginRight
calc(1rem * -1 / 2)
.pf-c-menu--pf-c-menu__header--c-menu__item--MarginBottom
calc(1rem * -1 / 2)
.pf-c-menu--pf-c-menu__header--c-menu__item--MarginLeft
calc(1rem * -1 / 2)
.pf-c-menu--pf-c-menu__header--c-menu__item--PaddingTop
0.5rem
.pf-c-menu--pf-c-menu__header--c-menu__item--PaddingRight
1rem
.pf-c-menu--pf-c-menu__header--c-menu__item--PaddingBottom
0.5rem
.pf-c-menu--pf-c-menu__header--c-menu__item--PaddingLeft
1rem
.pf-c-menu--pf-c-menu__header--c-menu__item--BackgroundColor
transparent
.pf-c-menu--pf-c-menu__header--c-menu__item--hover--BackgroundColor
#f0f0f0
.pf-c-menu--pf-c-menu__header--c-menu__item--focus--BackgroundColor
#f0f0f0
.pf-c-menu--pf-c-menu__search--PaddingTop
1rem
.pf-c-menu--pf-c-menu__search--PaddingRight
1rem
.pf-c-menu--pf-c-menu__search--PaddingBottom
1rem
.pf-c-menu--pf-c-menu__search--PaddingLeft
1rem
.pf-c-menu--pf-c-menu__header__search--PaddingTop
0
.pf-c-menu--pf-c-menu__list--Display
block
.pf-c-menu--pf-c-menu__list--PaddingTop
0.5rem
.pf-c-menu--pf-c-menu__list--PaddingBottom
0.5rem
.pf-c-menu--pf-c-menu__list-item--Display
flex
.pf-c-menu--pf-c-menu__list-item--Color
#151515
.pf-c-menu--pf-c-menu__list-item--BackgroundColor
transparent
.pf-c-menu--pf-c-menu__list-item--hover--BackgroundColor
#f0f0f0
.pf-c-menu--pf-c-menu__list-item--focus-within--BackgroundColor
#f0f0f0
.pf-c-menu--pf-c-menu__list-item--m-loading--PaddingTop
0.5rem
.pf-c-menu--pf-c-menu__item--PaddingTop
0.5rem
.pf-c-menu--pf-c-menu__item--PaddingRight
1rem
.pf-c-menu--pf-c-menu__item--PaddingBottom
0.5rem
.pf-c-menu--pf-c-menu__item--PaddingLeft
1rem
.pf-c-menu--pf-c-menu__item--OutlineOffset
calc(0.125rem * -1)
.pf-c-menu--pf-c-menu__item--FontSize
1rem
.pf-c-menu--pf-c-menu__item--FontWeight
400
.pf-c-menu--pf-c-menu__item--LineHeight
1.5
.pf-c-menu--pf-c-menu__list-item--m-disabled__item--Color
#6a6e73
.pf-c-menu--pf-c-menu__list-item--m-danger__item--Color
#c9190b
.pf-c-menu--pf-c-menu__list-item--m-load__item--Color
#06c
.pf-c-menu--pf-c-menu__group--Display
block
.pf-c-menu--pf-c-menu__group-title--PaddingTop
1rem
.pf-c-menu--pf-c-menu__group-title--PaddingRight
1rem
.pf-c-menu--pf-c-menu__group-title--PaddingLeft
1rem
.pf-c-menu--pf-c-menu__group-title--FontSize
0.75rem
.pf-c-menu--pf-c-menu__group-title--FontWeight
400
.pf-c-menu--pf-c-menu__group-title--Color
#6a6e73
.pf-c-menu--pf-c-menu__item-description--FontSize
0.75rem
.pf-c-menu--pf-c-menu__item-description--Color
#6a6e73
.pf-c-menu--pf-c-menu__item-icon--MarginRight
0.5rem
.pf-c-menu--pf-c-menu__item-check--MarginRight
0.5rem
.pf-c-menu--pf-c-menu__item-toggle-icon--PaddingRight
0.5rem
.pf-c-menu--pf-c-menu__item-toggle-icon--PaddingLeft
0.5rem
.pf-c-menu--pf-c-menu__list-item--m-disabled__item-toggle-icon--Color
#d2d2d2
.pf-c-menu--pf-c-menu__item-text--item-toggle-icon--MarginLeft
0.5rem
.pf-c-menu--pf-c-menu__item-toggle-icon--item-text--MarginLeft
0.5rem
.pf-c-menu--pf-c-menu__item-select-icon--MarginLeft
0.5rem
.pf-c-menu--pf-c-menu__item-select-icon--Color
#06c
.pf-c-menu--pf-c-menu__item-select-icon--FontSize
0.625rem
.pf-c-menu--pf-c-menu__item-external-icon--MarginLeft
0.5rem
.pf-c-menu--pf-c-menu__item-external-icon--Color
#06c
.pf-c-menu--pf-c-menu__item-external-icon--FontSize
0.625rem
.pf-c-menu--pf-c-menu__item-external-icon--Opacity
0
.pf-c-menu--pf-c-menu__item-action--PaddingTop
0.5rem
.pf-c-menu--pf-c-menu__item-action--PaddingRight
1rem
.pf-c-menu--pf-c-menu__item-action--PaddingBottom
0.5rem
.pf-c-menu--pf-c-menu__item-action--PaddingLeft
1rem
.pf-c-menu--pf-c-menu__item-action--Color
#6a6e73
.pf-c-menu--pf-c-menu__item-action--hover--Color
#151515
.pf-c-menu--pf-c-menu__item-action--disabled--Color
#d2d2d2
.pf-c-menu--pf-c-menu__item-action--m-favorited--Color
#f0ab00
.pf-c-menu--pf-c-menu__item-action--m-favorited--hover--Color
#c58c00
.pf-c-menu--pf-c-menu__item-action-icon--Height
calc(1rem * 1.5)
.pf-c-menu--pf-c-menu__item-action--m-favorite__icon--FontSize
0.625rem
.pf-c-menu--pf-c-menu__breadcrumb--PaddingTop
1rem
.pf-c-menu--pf-c-menu__breadcrumb--PaddingRight
1rem
.pf-c-menu--pf-c-menu__breadcrumb--PaddingBottom
1rem
.pf-c-menu--pf-c-menu__breadcrumb--PaddingLeft
1rem
.pf-c-menu--pf-c-menu__breadcrumb--c-breadcrumb__item--FontSize
1rem
.pf-c-menu--pf-c-menu__breadcrumb--c-breadcrumb__heading--FontSize
1rem
.pf-c-menu--pf-c-menu--m-drilldown--c-menu--Top
0
.pf-c-menu--pf-c-menu--m-drilldown--c-menu--TransitionDuration--transform
250ms
.pf-c-menu--pf-c-menu--m-drilldown--c-menu--Transition
transform 250ms
.pf-c-menu--pf-c-menu--m-drilldown__content--TransitionDuration--height
250ms
.pf-c-menu--pf-c-menu--m-drilldown__content--TransitionDuration--transform
250ms
.pf-c-menu--pf-c-menu--m-drilldown__content--Transition
transform 250ms, height 250ms
.pf-c-menu--pf-c-menu--m-drilldown__list--TransitionDuration--transform
250ms
.pf-c-menu--pf-c-menu--m-drilldown__list--Transition
transform 250ms
.pf-c-menu--pf-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex
100
.pf-c-menu--pf-c-menu__footer--PaddingTop
1rem
.pf-c-menu--pf-c-menu__footer--PaddingRight
1rem
.pf-c-menu--pf-c-menu__footer--PaddingBottom
1rem
.pf-c-menu--pf-c-menu__footer--PaddingLeft
1rem
.pf-c-menu--pf-c-menu__footer--BoxShadow
none
.pf-c-menu--pf-c-menu__footer--after--BorderTopWidth
1px
.pf-c-menu--pf-c-menu__footer--after--BorderTopColor
#d2d2d2
.pf-c-menu--pf-c-menu--m-scrollable__footer--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-menu--pf-c-menu--m-scrollable__footer--after--BorderTopWidth
0
.pf-c-menu--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth
1px
.pf-c-menu--pf-c-menu--m-nav--BoxShadow
0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)
.pf-c-menu--pf-c-menu--m-nav--BackgroundColor
#212427
.pf-c-menu--pf-c-menu--m-nav__list--PaddingTop
0
.pf-c-menu--pf-c-menu--m-nav__list--PaddingBottom
0
.pf-c-menu--pf-c-menu--m-nav__list-item--hover--BackgroundColor
#3c3f42
.pf-c-menu--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor
#3c3f42
.pf-c-menu--pf-c-menu--m-nav__list-item--active--BackgroundColor
#3c3f42
.pf-c-menu--pf-c-menu--m-nav__item--PaddingRight
1.5rem
.pf-c-menu--pf-c-menu--m-nav__item--PaddingLeft
1.5rem
.pf-c-menu--pf-c-menu--m-nav__item--Color
#fff
.pf-c-menu--pf-c-menu--m-nav__item--FontSize
0.875rem
.pf-c-menu--pf-c-menu--m-nav__item--OutlineOffset
calc(0.25rem * -1)
.pf-c-menu--pf-c-menu--m-nav__item--before--BorderBottomColor
#3c3f42
.pf-c-menu--pf-c-menu--m-nav__item--before--BorderBottomWidth
1px
.pf-c-menu--pf-c-menu--m-nav__item--hover--after--BorderLeftColor
#8a8d90
.pf-c-menu--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth
1px
.pf-c-menu--pf-c-menu--m-nav__item--hover--after--Top
calc(1px * -1)
.pf-c-menu--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top
0
.pf-c-menu--pf-c-menu--m-nav__item-description--Color
#f0f0f0
.pf-c-menu--pf-c-menu--m-nav--c-menu--left-offset
0.25rem
.pf-c-menu--pf-c-menu--m-nav--c-menu--m-top--bottom-offset
0
.pf-c-menu--pf-c-menu--m-nav--c-menu--m-left--right-offset
0.25rem
.pf-c-menu--pf-c-menu--m-nav--c-menu--Top
calc(1px * -1)
.pf-c-menu--pf-c-menu--m-nav--c-menu--Left
calc(100% - 0.25rem)
.pf-c-menu--pf-c-menu--m-nav--c-menu--m-left--Right
calc(100% - 0.25rem)
.pf-c-menu--pf-c-menu--m-nav--c-menu--m-top--Bottom
calc(0 + 0)
.pf-c-menu--pf-c-menu--m-nav__list-item--first-child--c-menu--Top
0
.pf-c-menu__group--pf-hidden-visible--visible--Visibility
visible
.pf-c-menu__group--pf-hidden-visible--hidden--Display
none
.pf-c-menu__group--pf-hidden-visible--hidden--Visibility
hidden
.pf-c-menu__group--pf-hidden-visible--Display
block
.pf-c-menu__group--pf-hidden-visible--Visibility
visible
.pf-c-menu__group--pf-hidden-visible--visible--Display
block
.pf-m-hidden.pf-c-menu__group--pf-hidden-visible--Display
none
.pf-m-hidden.pf-c-menu__group--pf-hidden-visible--Visibility
hidden
.pf-c-menu.pf-m-top--pf-c-menu--m-flyout__menu--Top
auto
.pf-c-menu.pf-m-top--pf-c-menu--m-flyout__menu--Bottom
calc(0.5rem * -1)
.pf-c-menu.pf-m-left--pf-c-menu--m-flyout__menu--Right
calc(100% + 0px)
.pf-c-menu.pf-m-left--pf-c-menu--m-flyout__menu--Left
auto
.pf-c-menu.pf-m-drilldown > .pf-c-menu__content .pf-c-menu--pf-c-menu--BoxShadow
none
.pf-c-menu.pf-m-drilldown .pf-c-menu__list .pf-c-menu__list--pf-c-menu__list--PaddingTop
0
.pf-c-menu.pf-m-drilldown .pf-c-menu__list .pf-c-menu__list--pf-c-menu__list--PaddingBottom
0
.pf-c-menu.pf-m-plain--pf-c-menu--BoxShadow
none
.pf-c-menu.pf-m-scrollable--pf-c-menu__content--MaxHeight
18.75rem
.pf-c-menu.pf-m-scrollable--pf-c-menu__footer--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-menu.pf-m-scrollable--pf-c-menu__footer--after--BorderTopWidth
0
.pf-c-menu.pf-m-nav--pf-c-menu--BackgroundColor
#212427
.pf-c-menu.pf-m-nav--pf-c-menu__list--PaddingTop
0
.pf-c-menu.pf-m-nav--pf-c-menu__list--PaddingBottom
0
.pf-c-menu.pf-m-nav--pf-c-menu__list-item--hover--BackgroundColor
#3c3f42
.pf-c-menu.pf-m-nav--pf-c-menu__list-item--focus-within--BackgroundColor
#3c3f42
.pf-c-menu.pf-m-nav--pf-c-menu__list-item--active--BackgroundColor
#3c3f42
.pf-c-menu.pf-m-nav--pf-c-menu__item--Color
#fff
.pf-c-menu.pf-m-nav--pf-c-menu__item--FontSize
0.875rem
.pf-c-menu.pf-m-nav--pf-c-menu__item--OutlineOffset
calc(0.25rem * -1)
.pf-c-menu.pf-m-nav--pf-c-menu__item--PaddingRight
1.5rem
.pf-c-menu.pf-m-nav--pf-c-menu__item--PaddingLeft
1.5rem
.pf-c-menu.pf-m-nav--pf-c-menu__item-description--Color
#f0f0f0
.pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-top--pf-c-menu--m-nav--c-menu--Top
auto
.pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-left--pf-c-menu--m-nav--c-menu--Left
auto
.pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child--pf-c-menu--m-nav__item--hover--after--Top
0
.pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child .pf-c-menu--pf-c-menu--m-nav--c-menu--Top
0
.pf-c-menu__breadcrumb .pf-c-breadcrumb--pf-c-breadcrumb__item--FontSize
1rem
.pf-c-menu__breadcrumb .pf-c-breadcrumb--pf-c-breadcrumb__heading--FontSize
1rem
.pf-c-menu__content .pf-c-menu__content--pf-c-menu__content--Height
auto
.pf-c-menu__header--pf-c-menu__item--PaddingTop
0.5rem
.pf-c-menu__header--pf-c-menu__item--PaddingRight
1rem
.pf-c-menu__header--pf-c-menu__item--PaddingBottom
0.5rem
.pf-c-menu__header--pf-c-menu__item--PaddingLeft
1rem
.pf-c-menu__header > .pf-c-menu__item--pf-c-menu__item--BackgroundColor
transparent
.pf-c-menu__header > .pf-c-menu__item:hover--pf-c-menu__item--BackgroundColor
#f0f0f0
.pf-c-menu__header > .pf-c-menu__item:focus--pf-c-menu__item--BackgroundColor
#f0f0f0
.pf-c-menu__header + .pf-c-menu__search--pf-c-menu__search--PaddingTop
0
.pf-c-menu__list--pf-hidden-visible--visible--Display
block
.pf-c-menu__list-item--pf-hidden-visible--visible--Display
flex
.pf-c-menu__list-item:hover--pf-c-menu__list-item--BackgroundColor
#f0f0f0
.pf-c-menu__list-item:hover--pf-c-menu__list-item--Color
#fff, inherit
.pf-c-menu__list-item:focus-within--pf-c-menu__list-item--BackgroundColor
#f0f0f0
.pf-c-menu__list-item:focus-within--pf-c-menu__list-item--Color
#fff, inherit
.pf-c-menu__list-item.pf-m-disabled--pf-c-menu__list-item--hover--BackgroundColor
transparent
.pf-c-menu__list-item.pf-m-disabled--pf-c-menu__list-item--focus-within--BackgroundColor
transparent
.pf-c-menu__list-item.pf-m-disabled--pf-c-menu__item--Color
#6a6e73
.pf-c-menu__list-item.pf-m-disabled--pf-c-menu__item-toggle-icon
#d2d2d2
.pf-c-menu__list-item.pf-m-load--pf-c-menu__list-item--hover--BackgroundColor
transparent
.pf-c-menu__list-item.pf-m-load--pf-c-menu__list-item--focus-within--BackgroundColor
transparent
.pf-c-menu__list-item.pf-m-load--pf-c-menu__item--Color
#06c
.pf-c-menu__list-item.pf-m-loading--pf-c-menu__list-item--hover--BackgroundColor
transparent
.pf-c-menu__list-item.pf-m-loading--pf-c-menu__list-item--focus-within--BackgroundColor
transparent
.pf-c-menu__list-item.pf-m-danger--pf-c-menu__item--Color
#c9190b, inherit
.pf-c-menu__item:hover--pf-c-menu__item-external-icon--Opacity
1
.pf-c-menu__item-action.pf-m-favorited--pf-c-menu__item-action--Color
#f0ab00
.pf-c-menu__item-action.pf-m-favorited--pf-c-menu__item-action--hover--Color
#c58c00
.pf-c-menu__item-action:hover--pf-c-menu__item-action--Color
#151515
.pf-c-menu__item-action:disabled--pf-c-menu__item-action--Color
#d2d2d2

View source on GitHub