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

Select menu document body

Favorites

View more

View more with checkboxes

Props

Select

*required
NameTypeDefaultDescription
onTogglerequired(isExpanded: boolean) => 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
inlineFilterPlaceholderTextstringnullPlaceholder text for inline filter
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
isDisabledbooleanfalseFlag to indicate if select is disabled
isGroupedbooleanfalseFlag to indicate if select options are grouped
isInputValuePersistedBetabooleanfalseFlag 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
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
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.
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
1px 1px 1px 1px
.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--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-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__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--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--Width
100%
.pf-c-select--pf-c-select__menu-item--disabled--Color
#6a6e73
.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
#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-action--hover--Color
#151515
.pf-c-select--pf-c-select__menu-item--m-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-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
.pf-c-select--pf-c-select__menu-item-description--PaddingRight
1rem
.pf-c-select--pf-c-select__menu-item-main--PaddingRight
1rem
.pf-c-select--pf-c-select__menu-item--m-selected__menu-item-main--PaddingRight
3rem
.pf-c-select--pf-c-select__menu-footer--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-select--pf-c-select__menu-footer--PaddingTop
1rem
.pf-c-select--pf-c-select__menu-footer--PaddingRight
1rem
.pf-c-select--pf-c-select__menu-footer--PaddingBottom
1rem
.pf-c-select--pf-c-select__menu-footer--PaddingLeft
1rem
.pf-c-select--pf-c-select__menu-footer--MarginTop
0.5rem
.pf-c-select--pf-c-select__menu-footer--MarginBottom
calc(0.5rem * -1)
.pf-c-select--pf-c-select-menu--c-divider--MarginTop
0.5rem
.pf-c-select--pf-c-select-menu--c-divider--MarginBottom
0.5rem
.pf-c-select .pf-c-divider:last-child--pf-c-select-menu--c-divider--MarginBottom
0
.pf-c-select.pf-m-invalid--pf-c-select__toggle--before--BorderBottomColor
#c9190b
.pf-c-select.pf-m-invalid--pf-c-select__toggle--before--BorderBottomWidth
2px
.pf-c-select.pf-m-invalid--pf-c-select__toggle--hover--before--BorderBottomColor
#c9190b
.pf-c-select.pf-m-invalid--pf-c-select__toggle--focus--before--BorderBottomColor
#c9190b
.pf-c-select.pf-m-invalid--pf-c-select__toggle--active--before--BorderBottomColor
#c9190b
.pf-c-select.pf-m-invalid--pf-c-select__toggle--m-expanded--before--BorderBottomColor
#c9190b
.pf-c-select.pf-m-invalid--pf-c-select__toggle-status-icon--Color
#c9190b