React

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

Props

Select properties
NameTypeRequiredDefaultDescription
childrenReact.ReactElement[]Content rendered inside the Select
classNamestringClasses applied to the root of the Select
direction'up' | 'down'Flag specifying which direction the Select menu expands
isExpandedbooleanFlag to indicate if select is expanded
isGroupedbooleanFlag to indicate if select options are grouped
isPlainbooleanDisplay the toggle with no border or background
isDisabledbooleanFlag to indicate if select is disabled
isCreatablebooleanFlag to indicate if the typeahead select allows new items
createTextstringText displayed in typeahead select to prompt the user to create an item
placeholderTextstring | React.ReactNodeTitle text of Select
noResultsFoundTextstringText to display in typeahead select when no results are found *
selectionsstring | SelectOptionObject | (string | SelectOptionObject)[]Selected item for single select variant. Array of selected items for multi select variants.
toggleIdstringId for select toggle element
aria-labelstringAdds accessible text to Select
ariaLabelledBystringId of label for the Select aria-labelledby
ariaLabelTypeAheadstringLabel for input field of type ahead select variants
ariaLabelClearstringLabel for clear selection button of type ahead select variants
ariaLabelTogglestringLabel for toggle of type ahead select variants
ariaLabelRemovestringLabel for remove chip button of multiple type ahead select variant
onSelect( event: React.MouseEvent | React.ChangeEvent, value: string | SelectOptionObject, isPlaceholder?: boolean ) => voidCallback for selection behavior
onToggle(isExpanded: boolean) => voidCallback for toggle button behavior
onClear(event: React.MouseEvent) => voidCallback for typeahead clear button
onFilter(e: React.ChangeEvent<HTMLInputElement>) => React.ReactElement[]Optional callback for custom filtering
onCreateOption(newOptionValue: string) => voidOptional callback for newly created options
variant'single' | 'checkbox' | 'typeahead' | 'typeaheadmulti'Variant of rendered Select
widthstring | numberWidth of the select container as a number of px or string percentage
maxHeightstring | numberMax height of the select container as a number of px or string percentage
toggleIconReact.ReactElementIcon element to render inside the select toggle
SelectOption properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeOptional alternate display for the option
classNamestring''Additional classes added to the Select Option
indexnumber0Internal index of the option
componentReact.ReactNode'button'Indicates which component will be used as select item
valuestring | SelectOptionObject''The value for the option, if passing an object you most provide a toString function
isDisabledbooleanfalseFlag indicating if the option is disabled
isPlaceholderbooleanfalseFlag indicating if the option acts as a placeholder
isSelectedbooleanfalseInternal flag indicating if the option is selected
isCheckedbooleanfalseInternal flag indicating if the option is checked
isFocusedbooleanfalseInternal flag indicating if the option is focused
sendRef(ref: React.ReactNode, index: number) => voidFunction.prototypeInternal callback for ref tracking
keyHandler(index: number, position: string) => voidFunction.prototypeInternal callback for keyboard navigation
onClick(event: React.MouseEvent | React.ChangeEvent) => voidFunction.prototypeOptional callback for click event
SelectGroup properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNode[] as React.ReactElement[]Checkboxes within group
classNamestring''Additional classes added to the CheckboxSelectGroup control
labelstring''Group label
titleIdstring''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--PaddingTopc_select__menu_group_not_first_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-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