React

Select

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

ExamplesPropsCSS Variables

Examples

Single select input

Copied to clipboard

Checkbox select input

Copied to clipboard

Grouped checkbox select input

Copied to clipboard

Typeahead select input

Copied to clipboard

Multiple typeahead select input

Copied to clipboard

Props

CheckboxSelect Props

The CheckboxSelect component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodeContent rendered inside the CheckboxSelect
classNamestring''Additional classes added to the CheckboxSelect control
isExpandedboolfalseFlag indicating the Select is expanded
isGroupedboolfalseFlag indicating whether checkboxes are grouped
checkedarrayOf[]Currently checked options
anyAdditional props are spread to the container <select>

CheckboxSelectGroup Props

The CheckboxSelectGroup component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullCheckboxes within group
classNamestring''Additional classes added to the CheckboxSelectGroup control
labelstring''Group label
anyAdditional props are spread to the container <select>

CheckboxSelectOption Props

The CheckboxSelectOption component accepts the following props.

NameTypeRequiredDefaultDescription
childrenstringnullthe value for the option
classNamestring''additional classes added to the Select Option
valuestringnullthe value for the option
isDisabledboolfalseflag indicating if the option is disabled
onClickfuncFunction.prototypeOptional on click callback
anyAdditional props are spread to the container <button>

Select Props

The Select component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullContent rendered inside the Select
classNamestring''Classes applied to the root of the Select
isExpandedboolfalseFlag to indicate if select is expanded
isGroupedboolfalseFlag to indicate if select options are grouped
placeholderTextunionnullTitle text of Select
selectionsunionnullSelected item
aria-labelstringnullAdds accessible text to Select
ariaLabelledBystringnullId of label for the Select aria-labelledby
ariaLabelTypeAheadstringnullLabel for input field of type ahead select variants
ariaLabelClearstring'Clear all'Label for clear selection button of type ahead select variants
ariaLabelTogglestring'Options menu'Label for toggle of type ahead select variants
ariaLabelRemovestring'Remove'Label for remove chip button of multiple type ahead select variant
onSelectfuncCallback for selection behavior
onTogglefuncCallback for toggle button behavior
onClearfuncFunction.prototypeCallback for typeahead clear button
variantenumSelectVariant.singleVariant of rendered Select
widthunionnullWidth of the select container as a number of px or string percentage
anyAdditional props are spread to the container <ul>

SelectOption Props

The SelectOption component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''additional classes added to the Select Option
valuestringnullthe value for the option
indexnumber0internal index of the option
isDisabledboolfalseflag indicating if the option is disabled
isPlaceholderboolfalseflag indicating if the option acts as a placeholder
isSelectedboolfalseInternal flag indicating if the option is selected
onClickfuncFunction.prototypeOptional on click callback
sendReffuncFunction.prototypeInternal callback for ref tracking
keyHandlerfuncFunction.prototypeInternal callback for keyboard navigation
anyAdditional props are spread to the container <button>

SingleSelect Props

The SingleSelect component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodeContent rendered inside the SingleSelect
classNamestring''Additional classes added to the SingleSelect control
isExpandedboolfalseFlag indicating the Select is expanded
openedOnEnterboolfalseInternal flag indicating whether select was opened via keyboard
selectedunion''Currently selected option
anyAdditional props are spread to the container <select>

CSS Variables

--pf-c-select__menu--BackgroundColorc_select__menu_BackgroundColor#fff
--pf-c-select__menu--BorderWidthc_select__menu_BorderWidth1px
--pf-c-select__menu--BoxShadowc_select__menu_BoxShadow0 0.0625rem 0.0625rem 0rem rgba(3,3,3,.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,.06)
--pf-c-select__menu--PaddingBottomc_select__menu_PaddingBottom0.5rem
--pf-c-select__menu--PaddingTopc_select__menu_PaddingTop0.5rem
--pf-c-select__menu--Topc_select__menu_Topcalc(100% + 0.25rem)
--pf-c-select__menu--ZIndexc_select__menu_ZIndex100
--pf-c-select__menu-group--not-first--PaddingTopc_select__menu_group_not_first_PaddingTop0.5rem
--pf-c-select__menu-group-title--Colorc_select__menu_group_title_Color#72767b
--pf-c-select__menu-group-title--FontSizec_select__menu_group_title_FontSize0.875rem
--pf-c-select__menu-group-title--FontWeightc_select__menu_group_title_FontWeight500
--pf-c-select__menu-group-title--PaddingBottomc_select__menu_group_title_PaddingBottom0.5rem
--pf-c-select__menu-group-title--PaddingLeftc_select__menu_group_title_PaddingLeft1rem
--pf-c-select__menu-group-title--PaddingRightc_select__menu_group_title_PaddingRight1rem
--pf-c-select__menu-group-title--PaddingTopc_select__menu_group_title_PaddingTop0.5rem
--pf-c-select__menu-item--Colorc_select__menu_item_Color#151515
--pf-c-select__menu-item--FontSizec_select__menu_item_FontSize1rem
--pf-c-select__menu-item--FontWeightc_select__menu_item_FontWeight400
--pf-c-select__menu-item--LineHeightc_select__menu_item_LineHeight1.5
--pf-c-select__menu-item--PaddingBottomc_select__menu_item_PaddingBottom0.5rem
--pf-c-select__menu-item--PaddingLeftc_select__menu_item_PaddingLeft1rem
--pf-c-select__menu-item--PaddingRightc_select__menu_item_PaddingRight1rem
--pf-c-select__menu-item--PaddingTopc_select__menu_item_PaddingTop0.5rem
--pf-c-select__menu-item--disabled--BackgroundColorc_select__menu_item_disabled_BackgroundColortransparent
--pf-c-select__menu-item--disabled--Colorc_select__menu_item_disabled_Color#72767b
--pf-c-select__menu-item--hover--BackgroundColorc_select__menu_item_hover_BackgroundColor#ededed
--pf-c-select__menu-item--match--FontWeightc_select__menu_item_match_FontWeight600
--pf-c-select__menu--m-top--Transformc_select__menu_m_top_TransformtranslateY(calc(-100% - 0.25rem))
--pf-c-select__separator--BackgroundColorc_select__separator_BackgroundColor#ededed
--pf-c-select__separator--Heightc_select__separator_Height1px
--pf-c-select__separator--MarginBottomc_select__separator_MarginBottom0.5rem
--pf-c-select__separator--MarginTopc_select__separator_MarginTop0.5rem
--pf-c-select__toggle--BackgroundColorc_select__toggle_BackgroundColor#fff
--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_BorderWidth1px
--pf-c-select__toggle--Colorc_select__toggle_Color#151515
--pf-c-select__toggle--FontSizec_select__toggle_FontSize1rem
--pf-c-select__toggle--FontWeightc_select__toggle_FontWeight400
--pf-c-select__toggle--LineHeightc_select__toggle_LineHeight1.5
--pf-c-select__toggle--MinWidthc_select__toggle_MinWidth44px
--pf-c-select__toggle--PaddingBottomc_select__toggle_PaddingBottom0
--pf-c-select__toggle--PaddingLeftc_select__toggle_PaddingLeft0.5rem
--pf-c-select__toggle--PaddingRightc_select__toggle_PaddingRight0
--pf-c-select__toggle--PaddingTopc_select__toggle_PaddingTop0
--pf-c-select__toggle--active--BorderBottomColorc_select__toggle_active_BorderBottomColor#06c
--pf-c-select__toggle--active--BorderBottomWidthc_select__toggle_active_BorderBottomWidth2px
--pf-c-select__toggle-arrow--MarginLeftc_select__toggle_arrow_MarginLeft1rem
--pf-c-select__toggle-arrow--MarginRightc_select__toggle_arrow_MarginRight0.5rem
--pf-c-select__toggle-arrow--with-clear--MarginLeftc_select__toggle_arrow_with_clear_MarginLeft0.5rem
--pf-c-select__toggle-badge--PaddingLeftc_select__toggle_badge_PaddingLeft0.5rem
--pf-c-select__toggle-button--Colorc_select__toggle_button_Color#151515
--pf-c-select__toggle-button--PaddingLeftc_select__toggle_button_PaddingLeft0.5rem
--pf-c-select__toggle-clear--PaddingLeftc_select__toggle_clear_PaddingLeft1rem
--pf-c-select__toggle-clear--PaddingRightc_select__toggle_clear_PaddingRight0.5rem
--pf-c-select__toggle--expanded--BorderBottomColorc_select__toggle_expanded_BorderBottomColor#06c
--pf-c-select__toggle--expanded--BorderBottomWidthc_select__toggle_expanded_BorderBottomWidth2px
--pf-c-select__toggle--hover--BorderBottomColorc_select__toggle_hover_BorderBottomColor#06c
--pf-c-select__toggle--m-plain--BorderColorc_select__toggle_m_plain_BorderColortransparent
--pf-c-select__toggle--m-plain--Colorc_select__toggle_m_plain_Color#72767b
--pf-c-select__toggle--m-plain--hover--Colorc_select__toggle_m_plain_hover_Color#151515
--pf-c-select__toggle-typeahead--BackgroundColorc_select__toggle_typeahead_BackgroundColortransparent
--pf-c-select__toggle-typeahead--BorderLeftc_select__toggle_typeahead_BorderLeftnone
--pf-c-select__toggle-typeahead--BorderRightc_select__toggle_typeahead_BorderRightnone
--pf-c-select__toggle-typeahead--BorderTopc_select__toggle_typeahead_BorderTopnone
--pf-c-select__toggle-typeahead--FlexBasisc_select__toggle_typeahead_FlexBasis10em
--pf-c-select__toggle-typeahead--active--PaddingBottomc_select__toggle_typeahead_active_PaddingBottomcalc(0.375rem - 1px)
--pf-c-select__toggle-wrapper--MaxWidthc_select__toggle_wrapper_MaxWidthcalc(100% - 1.5rem)
--pf-c-select__toggle-wrapper--c-chip--c-button--PaddingBottomc_select__toggle_wrapper_c_chip_c_button_PaddingBottom0.25rem
--pf-c-select__toggle-wrapper--c-chip--c-button--PaddingTopc_select__toggle_wrapper_c_chip_c_button_PaddingTop0.25rem
--pf-c-select__toggle-wrapper--c-chip-group--MarginBottomc_select__toggle_wrapper_c_chip_group_MarginBottom0
--pf-c-select__toggle-wrapper--m-typeahead--PaddingTopc_select__toggle_wrapper_m_typeahead_PaddingTop0.25rem
--pf-c-select__toggle-wrapper--not-last-child--MarginRightc_select__toggle_wrapper_not_last_child_MarginRight0.25rem