Skip to content
Patternfly Logo

Select

Examples

Single

Single with description

Grouped single

Validated

Checkbox input

Checkbox input with counts

Checkbox input no badge

Grouped checkbox input

Grouped single with filtering

Grouped checkbox input with filtering

Filter by status

Grouped checkbox input with filtering and placeholder text

Filter by status

Grouped checkbox input with filtering and custom badging

Filter by status

Typeahead

Grouped typeahead

Custom filtering

Multiple

Multiple with Custom Chip Group Props

Multiple with Render Custom Chip Group

Multiple with custom objects

Plain multiple typeahead

Panel

Appending document body vs parent

Avoid passing in document.body when passing a value to the menuAppendTo prop on the Select component, as it can cause accessibility issues. These issues can include, but are not limited to, being unable to enter the contents of the Select options via assistive technologies (like keyboards or screen readers).

Instead append to "parent" to achieve the same result without sacrificing accessibility.

In this example, while, when the dropdown is opened, both Select variants handle focus management within their dropdown contents the same way, you'll notice a difference when you try pressing the Tab key after selecting an option.

For the document.body variant, the focus will be placed at the end of the page, since that is where the dropdown content is appended to in the DOM (rather than focus being placed on the second Select variant as one might expect). For the "parent" variant, however, the focus will be placed on the next tab-able element (the "Toggle JS code" button for the code editor in this case).

Favorites

View more Beta

View more with checkboxes Beta

With a style applied to the placeholder text

Filter by status

With a style applied to the placeholder option

Filter by status

Props

Select

*required
NameTypeDefaultDescription
onTogglerequired(isExpanded: boolean, event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event) => voidCallback for toggle button behavior
aria-describedbystring''Id of div for the select aria-labelledby
aria-invalidbooleanfalseFlag indicating if the select is an invalid state
aria-labelstring''Adds accessible text to Select
aria-labelledbystring''Id of label for the Select aria-labelledby
childrenReact.ReactElement[][]Content rendered inside the Select. Must be React.ReactElement<SelectGroupProps>[]
chipGroupComponentReact.ReactNodenullOptional props to render custom chip group in the typeaheadmulti variant
chipGroupPropsOmit<ChipGroupProps, 'children' | 'ref'>Optional props to pass to the chip group in the typeaheadmulti variant
classNamestring''Classes applied to the root of the Select
clearSelectionsAriaLabelstring'Clear all'Label for clear selection button of type ahead select variants
createTextstring'Create'Text displayed in typeahead select to prompt the user to create an item
customBadgeTextstring | numbernullCustom text for select badge
customContentReact.ReactNodenullCustom content to render in the select menu. If this prop is defined, the variant prop will be ignored and the select will render with a single select toggle
direction'up' | 'down'SelectDirection.downFlag specifying which direction the Select menu expands
favoritesstring[][]ID list of favorited select items
favoritesLabelstring'Favorites'Label for the favorites group
footerReact.ReactNodeContent rendered in the footer of the select menu
hasInlineFilterbooleanfalseFlag indicating if select should have an inline text input for filtering
hasPlaceholderStylebooleanfalseFlag indicating if placeholder styles should be applied
inlineFilterPlaceholderTextstringnullPlaceholder text for inline filter
inputAutoCompletestring'off'Value for the typeahead and inline filtering input autocomplete attribute. When targeting Chrome this property should be a random string.
inputIdPrefixstring''Prefix for the id of the input in the checkbox select variant
isCheckboxSelectionBadgeHiddenbooleanFlag indicating if selection badge should be hidden for checkbox variant,default false
isCreatablebooleanfalseFlag to indicate if the typeahead select allows new items
isCreateSelectOptionObjectBetabooleanfalseFlag indicating if the creatable option should set its value as a SelectOptionObject
isDisabledbooleanfalseFlag to indicate if select is disabled
isGroupedbooleanfalseFlag to indicate if select options are grouped
isInputFilterPersistedBetabooleanfalseFlag for retaining filter results on blur from keyboard-entered typeahead text
isInputValuePersistedbooleanfalseFlag for retaining keyboard-entered value in typeahead text field when focus leaves input away
isOpenbooleanfalseFlag to indicate if select is open
isPlainbooleanfalseDisplay the toggle with no border or background
loadingVariantBeta'spinner' | SelectViewMoreObjectLoading variant to display either the spinner or the view more text button
maxHeightstring | numberMax height of the select container as a number of px or string percentage
menuAppendToNo type info'inline'
noResultsFoundTextstring'No results found'Text to display in typeahead select when no results are found
onBlur(event?: any) => voidCallback for toggle blur
onClear(event: React.MouseEvent) => void() => undefined as voidCallback for typeahead clear button
onCreateOption(newOptionValue: string) => void() => undefined as voidOptional callback for newly created options
onFavorite(itemId: string, isFavorite: boolean) => voidEnables favorites. Callback called when a select options's favorite button is clicked
onFilter(e: React.ChangeEvent<HTMLInputElement> | null, value: string) => React.ReactElement[] | undefinednullOptional callback for custom filtering
onSelect( event: React.MouseEvent | React.ChangeEvent, value: string | SelectOptionObject, isPlaceholder?: boolean ) => voidCallback for selection behavior
onTypeaheadInputChanged(value: string) => voidnullOptional event handler called each time the value in the typeahead input changes.
ouiaSafeNo type infotrue
placeholderTextstring | React.ReactNode''Title text of Select
positionSelectPosition | 'right' | 'left'SelectPosition.leftIndicates where menu will be aligned horizontally
removeSelectionAriaLabelstring'Remove'Label for remove chip button of multiple type ahead select variant
selectionsstring | SelectOptionObject | (string | SelectOptionObject)[][]Array of selected items for multi select variants.
shouldResetOnSelectbooleantrueFlag indicating the typeahead input value should reset upon selection
toggleAriaLabelstring'Options menu'Label for toggle of type ahead select variants
toggleIconReact.ReactElementnullIcon element to render inside the select toggle
toggleIdstringnullId for select toggle element
typeAheadAriaLabelstring''Label for input field of type ahead select variants
validated'success' | 'warning' | 'error' | 'default''default'Value to indicate if the select is modified to show that validation state. If set to success, select will be modified to indicate valid state. If set to error, select will be modified to indicate error state. If set to warning, select will be modified to indicate warning state.
variant'single' | 'checkbox' | 'typeahead' | 'typeaheadmulti'SelectVariant.singleVariant of rendered Select
widthstring | number''Width of the select container as a number of px or string percentage

SelectOption

*required
NameTypeDefaultDescription
ariaIsFavoriteLabelstringAria label text for favoritable button when favorited
ariaIsNotFavoriteLabelstringAria label text for favoritable button when not favorited
childrenReact.ReactNodeOptional alternate display for the option
classNamestring''Additional classes added to the Select Option
componentReact.ReactNode'button'Indicates which component will be used as select item
descriptionReact.ReactNodeDescription of the item for single and both typeahead select variants
idstringID of the item. Required for tracking favorites
inputIdstring''Id of the checkbox input
isDisabledbooleanfalseFlag indicating if the option is disabled
isFocusedbooleanFlag forcing the focused state
isNoResultsOptionbooleanfalseFlag indicating if the option acts as a "no results" indicator
isPlaceholderbooleanfalseFlag indicating if the option acts as a placeholder
itemCountnumberNumber of items matching the option
onClick(event: React.MouseEvent | React.ChangeEvent) => void() => {}Optional callback for click event
valuestring | SelectOptionObject''The value for the option, can be a string or select option object

SelectGroup

*required
NameTypeDefaultDescription
childrenReact.ReactNode[]Checkboxes within group. Must be React.ReactElement<SelectOptionProps>[]
classNamestring''Additional classes added to the CheckboxSelectGroup control
labelstring''Group label
titleIdstring''ID for title label

SelectOptionObject

*required
NameTypeDefaultDescription
toStringrequiredstringFunction returns a string to represent the select option object
compareTobooleanFunction returns a true if the passed in select option is equal to this select option object, false otherwise

SelectViewMoreObject

*required
NameTypeDefaultDescription
onClickrequired(event: React.MouseEvent | React.ChangeEvent) => voidCallback for when the view more button is clicked
textrequiredstringView more text

CSS variables

.pf-c-select--pf-global--Color--100
#151515
.pf-c-select--pf-global--Color--200
#6a6e73
.pf-c-select--pf-global--BorderColor--100
#d2d2d2
.pf-c-select--pf-global--primary-color--100
#06c
.pf-c-select--pf-global--link--Color
#06c
.pf-c-select--pf-global--link--Color--hover
#004080
.pf-c-select--pf-global--BackgroundColor--100
#fff
.pf-c-select--pf-c-select__toggle--PaddingTop
0.375rem
.pf-c-select--pf-c-select__toggle--PaddingRight
0.5rem
.pf-c-select--pf-c-select__toggle--PaddingBottom
0.375rem
.pf-c-select--pf-c-select__toggle--PaddingLeft
0.5rem
.pf-c-select--pf-c-select__toggle--MinWidth
44px
.pf-c-select--pf-c-select__toggle--FontSize
1rem
.pf-c-select--pf-c-select__toggle--FontWeight
400
.pf-c-select--pf-c-select__toggle--LineHeight
1.5
.pf-c-select--pf-c-select__toggle--BackgroundColor
#fff
.pf-c-select--pf-c-select__toggle--before--BorderTopWidth
1px
.pf-c-select--pf-c-select__toggle--before--BorderRightWidth
1px
.pf-c-select--pf-c-select__toggle--before--BorderBottomWidth
1px
.pf-c-select--pf-c-select__toggle--before--BorderLeftWidth
1px
.pf-c-select--pf-c-select__toggle--before--BorderWidth
initial
.pf-c-select--pf-c-select__toggle--before--BorderTopColor
#f0f0f0
.pf-c-select--pf-c-select__toggle--before--BorderRightColor
#f0f0f0
.pf-c-select--pf-c-select__toggle--before--BorderBottomColor
#8a8d90
.pf-c-select--pf-c-select__toggle--before--BorderLeftColor
#f0f0f0
.pf-c-select--pf-c-select__toggle--Color
#151515
.pf-c-select--pf-c-select__toggle--hover--before--BorderBottomColor
#06c
.pf-c-select--pf-c-select__toggle--focus--before--BorderBottomColor
#06c
.pf-c-select--pf-c-select__toggle--focus--before--BorderBottomWidth
2px
.pf-c-select--pf-c-select__toggle--active--before--BorderBottomColor
#06c
.pf-c-select--pf-c-select__toggle--active--before--BorderBottomWidth
2px
.pf-c-select--pf-c-select__toggle--m-expanded--before--BorderBottomColor
#06c
.pf-c-select--pf-c-select__toggle--m-expanded--before--BorderBottomWidth
2px
.pf-c-select--pf-c-select__toggle--disabled--BackgroundColor
#f0f0f0
.pf-c-select--pf-c-select__toggle--m-plain--before--BorderColor
transparent
.pf-c-select--pf-c-select__toggle--m-placeholder--Color
transparent
.pf-c-select--pf-c-select--m-invalid__toggle--before--BorderBottomColor
#c9190b
.pf-c-select--pf-c-select--m-invalid__toggle--before--BorderBottomWidth
2px
.pf-c-select--pf-c-select--m-invalid__toggle--hover--before--BorderBottomColor
#c9190b
.pf-c-select--pf-c-select--m-invalid__toggle--focus--before--BorderBottomColor
#c9190b
.pf-c-select--pf-c-select--m-invalid__toggle--active--before--BorderBottomColor
#c9190b
.pf-c-select--pf-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor
#c9190b
.pf-c-select--pf-c-select--m-invalid__toggle-status-icon--Color
#c9190b
.pf-c-select--pf-c-select--m-success__toggle--before--BorderBottomColor
#3e8635
.pf-c-select--pf-c-select--m-success__toggle--before--BorderBottomWidth
2px
.pf-c-select--pf-c-select--m-success__toggle--hover--before--BorderBottomColor
#3e8635
.pf-c-select--pf-c-select--m-success__toggle--focus--before--BorderBottomColor
#3e8635
.pf-c-select--pf-c-select--m-success__toggle--active--before--BorderBottomColor
#3e8635
.pf-c-select--pf-c-select--m-success__toggle--m-expanded--before--BorderBottomColor
#3e8635
.pf-c-select--pf-c-select--m-success__toggle-status-icon--Color
#3e8635
.pf-c-select--pf-c-select--m-warning__toggle--before--BorderBottomColor
#f0ab00
.pf-c-select--pf-c-select--m-warning__toggle--before--BorderBottomWidth
2px
.pf-c-select--pf-c-select--m-warning__toggle--hover--before--BorderBottomColor
#f0ab00
.pf-c-select--pf-c-select--m-warning__toggle--focus--before--BorderBottomColor
#f0ab00
.pf-c-select--pf-c-select--m-warning__toggle--active--before--BorderBottomColor
#f0ab00
.pf-c-select--pf-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor
#f0ab00
.pf-c-select--pf-c-select--m-warning__toggle-status-icon--Color
#f0ab00
.pf-c-select--pf-c-select__toggle-wrapper--not-last-child--MarginRight
0.25rem
.pf-c-select--pf-c-select__toggle-wrapper--MaxWidth
calc(100% - 1.5rem)
.pf-c-select--pf-c-select__toggle-wrapper--c-chip-group--MarginTop
0.3125rem
.pf-c-select--pf-c-select__toggle-wrapper--c-chip-group--MarginBottom
0.3125rem
.pf-c-select--pf-c-select__toggle-typeahead--FlexBasis
10em
.pf-c-select--pf-c-select__toggle-typeahead--BackgroundColor
transparent
.pf-c-select--pf-c-select__toggle-typeahead--BorderTop
1px solid transparent
.pf-c-select--pf-c-select__toggle-typeahead--BorderRight
none
.pf-c-select--pf-c-select__toggle-typeahead--BorderLeft
none
.pf-c-select--pf-c-select__toggle-typeahead--MinWidth
7.5rem
.pf-c-select--pf-c-select__toggle-typeahead--focus--PaddingBottom
calc(0.375rem - 2px)
.pf-c-select--pf-c-select__toggle--m-placeholder__toggle-text--Color
#6a6e73
.pf-c-select--pf-c-select__toggle-icon--toggle-text--MarginLeft
0.25rem
.pf-c-select--pf-c-select__toggle-badge--PaddingLeft
0.5rem
.pf-c-select--pf-c-select__toggle-status-icon--MarginLeft
0.25rem
.pf-c-select--pf-c-select__toggle-status-icon--Color
#151515
.pf-c-select--pf-c-select__toggle-arrow--MarginLeft
1rem
.pf-c-select--pf-c-select__toggle-arrow--MarginRight
0.5rem
.pf-c-select--pf-c-select__toggle-arrow--with-clear--MarginLeft
0.5rem
.pf-c-select--pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate
180deg
.pf-c-select--pf-c-select--m-plain__toggle-arrow--Color
#6a6e73
.pf-c-select--pf-c-select--m-plain--hover__toggle-arrow--Color
#151515
.pf-c-select--pf-c-select__toggle-clear--PaddingRight
0.5rem
.pf-c-select--pf-c-select__toggle-clear--PaddingLeft
1rem
.pf-c-select--pf-c-select__toggle-clear--toggle-button--PaddingLeft
0.5rem
.pf-c-select--pf-c-select__toggle-button--Color
#151515
.pf-c-select--pf-c-select__menu--BackgroundColor
#fff
.pf-c-select--pf-c-select__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-select--pf-c-select__menu--PaddingTop
0.5rem
.pf-c-select--pf-c-select__menu--PaddingBottom
0.5rem
.pf-c-select--pf-c-select__menu--Top
calc(100% + 0.25rem)
.pf-c-select--pf-c-select__menu--ZIndex
200
.pf-c-select--pf-c-select__menu--Width
auto
.pf-c-select--pf-c-select__menu--MinWidth
100%
.pf-c-select--pf-c-select__menu--m-top--TranslateY
calc(-100% - 0.25rem)
.pf-c-select--pf-c-select__list-item--m-loading--PaddingTop
0.5rem
.pf-c-select--pf-c-select__menu-item--PaddingTop
0.5rem
.pf-c-select--pf-c-select__menu-item--PaddingRight
1rem
.pf-c-select--pf-c-select__menu-item--m-selected--PaddingRight
3rem
.pf-c-select--pf-c-select__menu-item--PaddingBottom
0.5rem
.pf-c-select--pf-c-select__menu-item--PaddingLeft
1rem
.pf-c-select--pf-c-select__menu-item--FontSize
1rem
.pf-c-select--pf-c-select__menu-item--FontWeight
400
.pf-c-select--pf-c-select__menu-item--LineHeight
1.5
.pf-c-select--pf-c-select__menu-item--Color
#151515
.pf-c-select--pf-c-select__menu-item--disabled--Color
#6a6e73
.pf-c-select--pf-c-select__menu-item--Width
100%
.pf-c-select--pf-c-select__menu-item--hover--BackgroundColor
#f0f0f0
.pf-c-select--pf-c-select__menu-item--focus--BackgroundColor
#f0f0f0
.pf-c-select--pf-c-select__menu-item--disabled--BackgroundColor
transparent
.pf-c-select--pf-c-select__menu-item--m-link--Width
auto
.pf-c-select--pf-c-select__menu-item--m-link--hover--BackgroundColor
transparent
.pf-c-select--pf-c-select__menu-item--m-link--focus--BackgroundColor
transparent
.pf-c-select--pf-c-select__menu-item--m-action--Color
#6a6e73
.pf-c-select--pf-c-select__menu-item--m-action--hover--Color
#151515
.pf-c-select--pf-c-select__menu-item--m-action--focus--Color
#151515
.pf-c-select--pf-c-select__menu-item--m-action--disabled--Color
#d2d2d2
.pf-c-select--pf-c-select__menu-item--m-action--Width
auto
.pf-c-select--pf-c-select__menu-item--m-action--FontSize
0.625rem
.pf-c-select--pf-c-select__menu-item--m-action--hover--BackgroundColor
transparent
.pf-c-select--pf-c-select__menu-item--m-action--focus--BackgroundColor
transparent
.pf-c-select--pf-c-select__menu-item--hover__menu-item--m-action--Color
#6a6e73
.pf-c-select--pf-c-select__menu-item--m-favorite-action--Color
#6a6e73
.pf-c-select--pf-c-select__menu-item--m-favorite-action--hover--Color
#151515
.pf-c-select--pf-c-select__menu-item--m-favorite-action--focus--Color
#151515
.pf-c-select--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color
#f0ab00
.pf-c-select--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color
#c58c00
.pf-c-select--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color
#c58c00
.pf-c-select--pf-c-select__menu-item--m-load--Color
#06c
.pf-c-select--pf-c-select__menu-item-icon--Color
#06c
.pf-c-select--pf-c-select__menu-item-icon--FontSize
0.625rem
.pf-c-select--pf-c-select__menu-item-icon--Right
1rem
.pf-c-select--pf-c-select__menu-item-icon--Top
50%
.pf-c-select--pf-c-select__menu-item-icon--TranslateY
-50%
.pf-c-select--pf-c-select__menu-item-action-icon--MinHeight
calc(1rem * 1.5)
.pf-c-select--pf-c-select__menu-item--match--FontWeight
700
.pf-c-select--pf-c-select__menu-search--PaddingTop
0.5rem
.pf-c-select--pf-c-select__menu-search--PaddingRight
1rem
.pf-c-select--pf-c-select__menu-search--PaddingBottom
1rem
.pf-c-select--pf-c-select__menu-search--PaddingLeft
1rem
.pf-c-select--pf-c-select__menu-group--menu-group--PaddingTop
0.5rem
.pf-c-select--pf-c-select__menu-group-title--PaddingTop
0.5rem
.pf-c-select--pf-c-select__menu-group-title--PaddingRight
1rem
.pf-c-select--pf-c-select__menu-group-title--PaddingBottom
0.5rem
.pf-c-select--pf-c-select__menu-group-title--PaddingLeft
1rem
.pf-c-select--pf-c-select__menu-group-title--FontSize
0.875rem
.pf-c-select--pf-c-select__menu-group-title--FontWeight
700
.pf-c-select--pf-c-select__menu-group-title--Color
#6a6e73
.pf-c-select--pf-c-select__menu-item-count--MarginLeft
1rem
.pf-c-select--pf-c-select__menu-item-count--FontSize
0.875rem
.pf-c-select--pf-c-select__menu-item-count--Color
#6a6e73
.pf-c-select--pf-c-select__menu-item--disabled__menu-item-count--Color
#6a6e73
.pf-c-select--pf-c-select__menu-item-description--FontSize
0.75rem
.pf-c-select--pf-c-select__menu-item-description--Color
#6a6e73