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

Typeahead select input - custom filtering

Copied to clipboard

Multiple typeahead select input

Copied to clipboard

Multiple typeahead select input with custom objects

Copied to clipboard

Plain multiple typeahead select input

Copied to clipboard

Props

Select props

The Select component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactElement[][] as React.ReactElement[]Content rendered inside the Select
classNamestring''Classes applied to the root of the Select
direction'up' | 'down'SelectDirection.downFlag specifying which direction the Select menu expands
isExpandedbooleanfalseFlag to indicate if select is expanded
isGroupedbooleanfalseFlag to indicate if select options are grouped
isPlainbooleanfalseDisplay the toggle with no border or background
isDisabledbooleanfalseFlag to indicate if select is disabled
isCreatablebooleanfalseFlag to indicate if the typeahead select allows new items
createTextstring"Create"Text displayed in typeahead select to prompt the user to create an item
placeholderTextstring | React.ReactNode''Title text of Select
noResultsFoundTextstring"No results found"Text to display in typeahead select when no results are found *
selectionsstring | SelectOptionObject | (string | SelectOptionObject)[]''Selected item
toggleIdstringnull as stringId for select toggle element
aria-labelstring''Adds accessible text to Select
ariaLabelledBystring''Id of label for the Select aria-labelledby
ariaLabelTypeAheadstring''Label 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
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) => voidFunction.prototypeCallback for typeahead clear button
onFilter(e: React.ChangeEvent<HTMLInputElement>) => React.ReactElement[]undefined as () => {}Optional callback for custom filtering
onCreateOption(newOptionValue: string) => voidFunction.prototypeOptional callback for newly created options
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
maxHeightstring | number''Max height of the select container as a number of px or string percentage
toggleIconReact.ReactElementnull as React.ReactElementIcon element to render inside the select toggle

SelectGroup props

The SelectGroup component accepts the following props.

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

SelectOption props

The SelectOption component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeOptional alternate display for the option
classNamestring''Additional classes added to the Select Option
indexnumber0Internal index of the option
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

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_ZIndex200
--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#737679
--pf-c-select__menu-group-title--FontSizec_select__menu_group_title_FontSize0.875rem
--pf-c-select__menu-group-title--FontWeightc_select__menu_group_title_FontWeight700
--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_PaddingRight3rem
--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#737679
--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_FontSize0.625rem
--pf-c-select__menu-item-icon--Rightc_select__menu_item_icon_Right1rem
--pf-c-select__menu-item-icon--Topc_select__menu_item_icon_Top50%
--pf-c-select__menu-item-icon--Transformc_select__menu_item_icon_TransformtranslateY(-50%)
--pf-c-select__menu-item--m-selected--PaddingRightc_select__menu_item_m_selected_PaddingRight3rem
--pf-c-select__menu-item--match--FontWeightc_select__menu_item_match_FontWeight700
--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#ededed
--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--m-top--m-expanded__toggle-arrow--Transformc_select__toggle_arrow_m_top_m_expanded__toggle_arrow_Transformrotate(180deg)
--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--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_BorderBottomWidth2px
--pf-c-select__toggle--hover--BorderBottomColorc_select__toggle_hover_BorderBottomColor#06c
--pf-c-select__toggle-icon--toggle-text--MarginLeftc_select__toggle_icon_toggle_text_MarginLeft0.25rem
--pf-c-select__toggle--m-plain--BorderColorc_select__toggle_m_plain_BorderColortransparent
--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-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-typeahead-form--MinWidthc_select__toggle_typeahead_form_MinWidth7.5rem
--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.25rem
--pf-c-select__toggle-wrapper--c-chip-group--MarginTopc_select__toggle_wrapper_c_chip_group_MarginTop0.5rem
--pf-c-select__toggle-wrapper--m-typeahead--PaddingTopc_select__toggle_wrapper_m_typeahead_PaddingTop0
--pf-c-select__toggle-wrapper--not-last-child--MarginRightc_select__toggle_wrapper_not_last_child_MarginRight0.25rem