Skip to Content
Patternfly Logo

Select

Use a select to choose one or more values from a list. Related design guidelines: Data input

ExamplesPropsCSS Variables

Examples

Single

Checkbox input

Grouped checkbox input

Typeahead

Custom filtering

Multiple

Multiple with custom objects

Plain multiple typeahead

Panel

Props

Select properties
NameTypeRequiredDefaultDescription
childrenReact.ReactElement[]No[]Content rendered inside the Select
classNamestringNo''Classes applied to the root of the Select
direction'up' | 'down'NoSelectDirection.downFlag specifying which direction the Select menu expands
isExpandedbooleanNofalseFlag to indicate if select is expanded
isGroupedbooleanNofalseFlag to indicate if select options are grouped
isPlainbooleanNofalseDisplay the toggle with no border or background
isDisabledbooleanNofalseFlag to indicate if select is disabled
isCreatablebooleanNofalseFlag to indicate if the typeahead select allows new items
createTextstringNo'Create'Text displayed in typeahead select to prompt the user to create an item
placeholderTextstring | React.ReactNodeNo''Title text of Select
noResultsFoundTextstringNo'No results found'Text to display in typeahead select when no results are found
selectionsstring | SelectOptionObject | (string | SelectOptionObject)[]No''Selected item for single select variant. Array of selected items for multi select variants.
toggleIdstringNonullId for select toggle element
aria-labelstringNo''Adds accessible text to Select
ariaLabelledBystringNo''Id of label for the Select aria-labelledby
ariaLabelTypeAheadstringNo''Label for input field of type ahead select variants
ariaLabelClearstringNo'Clear all'Label for clear selection button of type ahead select variants
ariaLabelTogglestringNo'Options menu'Label for toggle of type ahead select variants
ariaLabelRemovestringNo'Remove'Label for remove chip button of multiple type ahead select variant
onSelect( event: React.MouseEvent | React.ChangeEvent, value: string | SelectOptionObject, isPlaceholder?: boolean ) => voidNoCallback for selection behavior
onToggle(isExpanded: boolean) => voidYesCallback for toggle button behavior
onClear(event: React.MouseEvent) => voidNo() => undefined as voidCallback for typeahead clear button
onFilter(e: React.ChangeEvent<HTMLInputElement>) => React.ReactElement[]NonullOptional callback for custom filtering
onCreateOption(newOptionValue: string) => voidNo() => undefined as voidOptional callback for newly created options
variant'single' | 'checkbox' | 'typeahead' | 'typeaheadmulti'NoSelectVariant.singleVariant of rendered Select
widthstring | numberNo''Width of the select container as a number of px or string percentage
maxHeightstring | numberNoMax height of the select container as a number of px or string percentage
toggleIconReact.ReactElementNonullIcon element to render inside the select toggle
customContentReact.ReactNodeNonullCustom 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
SelectOption properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoOptional alternate display for the option
classNamestringNo''Additional classes added to the Select Option
indexnumberNo0Internal index of the option
componentReact.ReactNodeNo'button'Indicates which component will be used as select item
valuestring | SelectOptionObjectNo''The value for the option, can be a string or select option object
isDisabledbooleanNofalseFlag indicating if the option is disabled
isPlaceholderbooleanNofalseFlag indicating if the option acts as a placeholder
isSelectedbooleanNofalseInternal flag indicating if the option is selected
isCheckedbooleanNofalseInternal flag indicating if the option is checked
isFocusedbooleanNofalseInternal flag indicating if the option is focused
sendRef(ref: React.ReactNode, index: number) => voidNo() => {}Internal callback for ref tracking
keyHandler(index: number, position: string) => voidNo() => {}Internal callback for keyboard navigation
onClick(event: React.MouseEvent | React.ChangeEvent) => voidNo() => {}Optional callback for click event
SelectGroup properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNo[]Checkboxes within group
classNamestringNo''Additional classes added to the CheckboxSelectGroup control
labelstringNo''Group label
titleIdstringNo''ID for title label

CSS Variables

--pf-c-select__menu--BackgroundColorc_select__menu_BackgroundColor
#fff
--pf-c-select__menu--BorderWidthc_select__menu_BorderWidth
1px
--pf-c-select__menu--BoxShadowc_select__menu_BoxShadow
0 0.0625rem 0.0625rem 0rem rgba(3,3,3,0.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,0.06)
--pf-c-select__menu-group--not--first-of-type--PaddingTopc_select__menu_group_not_first_of_type_PaddingTop
0.5rem
--pf-c-select__menu-group-title--Colorc_select__menu_group_title_Color
#737679
--pf-c-select__menu-group-title--FontSizec_select__menu_group_title_FontSize
0.875rem
--pf-c-select__menu-group-title--FontWeightc_select__menu_group_title_FontWeight
700
--pf-c-select__menu-group-title--PaddingBottomc_select__menu_group_title_PaddingBottom
0.5rem
--pf-c-select__menu-group-title--PaddingLeftc_select__menu_group_title_PaddingLeft
1rem
--pf-c-select__menu-group-title--PaddingRightc_select__menu_group_title_PaddingRight
1rem
--pf-c-select__menu-group-title--PaddingTopc_select__menu_group_title_PaddingTop
0.5rem
--pf-c-select__menu-input--PaddingBottomc_select__menu_input_PaddingBottom
1rem
--pf-c-select__menu-input--PaddingLeftc_select__menu_input_PaddingLeft
1rem
--pf-c-select__menu-input--PaddingRightc_select__menu_input_PaddingRight
1rem
--pf-c-select__menu-input--PaddingTopc_select__menu_input_PaddingTop
0.5rem
--pf-c-select__menu-item--Colorc_select__menu_item_Color
#151515
--pf-c-select__menu-item--disabled--BackgroundColorc_select__menu_item_disabled_BackgroundColor
transparent
--pf-c-select__menu-item--disabled--Colorc_select__menu_item_disabled_Color
#737679
--pf-c-select__menu-item--FontSizec_select__menu_item_FontSize
1rem
--pf-c-select__menu-item--FontWeightc_select__menu_item_FontWeight
400
--pf-c-select__menu-item--hover--BackgroundColorc_select__menu_item_hover_BackgroundColor
#ededed
--pf-c-select__menu-item-icon--Colorc_select__menu_item_icon_Color
#06c
--pf-c-select__menu-item-icon--FontSizec_select__menu_item_icon_FontSize
0.625rem
--pf-c-select__menu-item-icon--Rightc_select__menu_item_icon_Right
1rem
--pf-c-select__menu-item-icon--Topc_select__menu_item_icon_Top
50%
--pf-c-select__menu-item-icon--Transformc_select__menu_item_icon_Transform
translateY(-50%)
--pf-c-select__menu-item--LineHeightc_select__menu_item_LineHeight
1.5
--pf-c-select__menu-item--m-selected--PaddingRightc_select__menu_item_m_selected_PaddingRight
3rem
--pf-c-select__menu-item--match--FontWeightc_select__menu_item_match_FontWeight
700
--pf-c-select__menu-item--PaddingBottomc_select__menu_item_PaddingBottom
0.5rem
--pf-c-select__menu-item--PaddingLeftc_select__menu_item_PaddingLeft
1rem
--pf-c-select__menu-item--PaddingRightc_select__menu_item_PaddingRight
3rem
--pf-c-select__menu-item--PaddingTopc_select__menu_item_PaddingTop
0.5rem
--pf-c-select__menu--m-top--Transformc_select__menu_m_top_Transform
translateY(calc(-100% - 0.25rem))
--pf-c-select__menu--PaddingBottomc_select__menu_PaddingBottom
0.5rem
--pf-c-select__menu--PaddingTopc_select__menu_PaddingTop
0.5rem
--pf-c-select__menu--Topc_select__menu_Top
calc(100% + 0.25rem)
--pf-c-select__menu--ZIndexc_select__menu_ZIndex
200
--pf-c-select__separator--BackgroundColorc_select__separator_BackgroundColor
#ededed
--pf-c-select__separator--Heightc_select__separator_Height
1px
--pf-c-select__separator--MarginBottomc_select__separator_MarginBottom
0.5rem
--pf-c-select__separator--MarginTopc_select__separator_MarginTop
0.5rem
--pf-c-select__toggle--active--BorderBottomColorc_select__toggle_active_BorderBottomColor
#06c
--pf-c-select__toggle--active--BorderBottomWidthc_select__toggle_active_BorderBottomWidth
2px
--pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Transformc_select__toggle_arrow_m_top_m_expanded__toggle_arrow_Transform
rotate(180deg)
--pf-c-select__toggle-arrow--MarginLeftc_select__toggle_arrow_MarginLeft
1rem
--pf-c-select__toggle-arrow--MarginRightc_select__toggle_arrow_MarginRight
0.5rem
--pf-c-select__toggle-arrow--with-clear--MarginLeftc_select__toggle_arrow_with_clear_MarginLeft
0.5rem
--pf-c-select__toggle--BackgroundColorc_select__toggle_BackgroundColor
#ededed
--pf-c-select__toggle-badge--PaddingLeftc_select__toggle_badge_PaddingLeft
0.5rem
--pf-c-select__toggle--BorderBottomColorc_select__toggle_BorderBottomColor
#06c
--pf-c-select__toggle--BorderLeftColorc_select__toggle_BorderLeftColor
#ededed
--pf-c-select__toggle--BorderRightColorc_select__toggle_BorderRightColor
#ededed
--pf-c-select__toggle--BorderTopColorc_select__toggle_BorderTopColor
#ededed
--pf-c-select__toggle--BorderWidthc_select__toggle_BorderWidth
1px
--pf-c-select__toggle-button--Colorc_select__toggle_button_Color
#151515
--pf-c-select__toggle-button--PaddingLeftc_select__toggle_button_PaddingLeft
0.5rem
--pf-c-select__toggle-clear--PaddingLeftc_select__toggle_clear_PaddingLeft
1rem
--pf-c-select__toggle-clear--PaddingRightc_select__toggle_clear_PaddingRight
0.5rem
--pf-c-select__toggle--Colorc_select__toggle_Color
#151515
--pf-c-select__toggle--disabled--BackgroundColorc_select__toggle_disabled_BackgroundColor
#ededed
--pf-c-select__toggle--expanded--BorderBottomColorc_select__toggle_expanded_BorderBottomColor
#06c
--pf-c-select__toggle--expanded--BorderBottomWidthc_select__toggle_expanded_BorderBottomWidth
2px
--pf-c-select__toggle--FontSizec_select__toggle_FontSize
1rem
--pf-c-select__toggle--FontWeightc_select__toggle_FontWeight
400
--pf-c-select__toggle--hover--BorderBottomColorc_select__toggle_hover_BorderBottomColor
#06c
--pf-c-select__toggle-icon--toggle-text--MarginLeftc_select__toggle_icon_toggle_text_MarginLeft
0.25rem
--pf-c-select__toggle--LineHeightc_select__toggle_LineHeight
1.5
--pf-c-select__toggle--m-plain--BorderColorc_select__toggle_m_plain_BorderColor
transparent
--pf-c-select__toggle--m-plain--Colorc_select__toggle_m_plain_Color
#151515
--pf-c-select__toggle--m-plain--hover--Colorc_select__toggle_m_plain_hover_Color
#151515
--pf-c-select__toggle--MinWidthc_select__toggle_MinWidth
44px
--pf-c-select__toggle--PaddingBottomc_select__toggle_PaddingBottom
0
--pf-c-select__toggle--PaddingLeftc_select__toggle_PaddingLeft
0.5rem
--pf-c-select__toggle--PaddingRightc_select__toggle_PaddingRight
0
--pf-c-select__toggle--PaddingTopc_select__toggle_PaddingTop
0
--pf-c-select__toggle-typeahead--active--PaddingBottomc_select__toggle_typeahead_active_PaddingBottom
calc(0.375rem - 1px)
--pf-c-select__toggle-typeahead--BackgroundColorc_select__toggle_typeahead_BackgroundColor
transparent
--pf-c-select__toggle-typeahead--BorderLeftc_select__toggle_typeahead_BorderLeft
none
--pf-c-select__toggle-typeahead--BorderRightc_select__toggle_typeahead_BorderRight
none
--pf-c-select__toggle-typeahead--BorderTopc_select__toggle_typeahead_BorderTop
none
--pf-c-select__toggle-typeahead--FlexBasisc_select__toggle_typeahead_FlexBasis
10em
--pf-c-select__toggle-typeahead-form--MinWidthc_select__toggle_typeahead_form_MinWidth
7.5rem
--pf-c-select__toggle-wrapper--c-chip--c-button--PaddingBottomc_select__toggle_wrapper_c_chip_c_button_PaddingBottom
0.25rem
--pf-c-select__toggle-wrapper--c-chip--c-button--PaddingTopc_select__toggle_wrapper_c_chip_c_button_PaddingTop
0.25rem
--pf-c-select__toggle-wrapper--c-chip-group--MarginBottomc_select__toggle_wrapper_c_chip_group_MarginBottom
0.25rem
--pf-c-select__toggle-wrapper--c-chip-group--MarginTopc_select__toggle_wrapper_c_chip_group_MarginTop
0.5rem
--pf-c-select__toggle-wrapper--m-typeahead--PaddingTopc_select__toggle_wrapper_m_typeahead_PaddingTop
0
--pf-c-select__toggle-wrapper--MaxWidthc_select__toggle_wrapper_MaxWidth
calc(100% - 1.5rem)
--pf-c-select__toggle-wrapper--not-last-child--MarginRightc_select__toggle_wrapper_not_last_child_MarginRight
0.25rem