Patternfly Logo

Examples

Single

Single with description

Grouped single

Checkbox input

Checkbox input no badge

Grouped checkbox input

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 custom objects

Plain multiple typeahead

Panel

select menu document body

Favorites

Props

Select properties
NameTypeRequiredDefaultDescription
aria-labelstringNo''Adds accessible text to Select
aria-labelledbystringNo''Id of label for the Select aria-labelledby
childrenReact.ReactElement[]No[]Content rendered inside the Select. Must be React.ReactElement<SelectGroupProps>[]
chipGroupPropsOmit<ChipGroupProps, 'children' | 'ref'>NoOptional props to pass to the chip group in the typeaheadmulti variant
classNamestringNo''Classes applied to the root of the Select
clearSelectionsAriaLabelstringNo'Clear all'Label for clear selection button of type ahead select variants
createTextstringNo'Create'Text displayed in typeahead select to prompt the user to create an item
customBadgeTextstring | numberNonullCustom text for select badge
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
direction'up' | 'down'NoSelectDirection.downFlag specifying which direction the Select menu expands
favoritesstring[]No[]ID list of favorited select items
favoritesLabelstringNo'Favorites'Label for the favorites group
hasInlineFilterbooleanNofalseFlag indicating if select should have an inline text input for filtering
inlineFilterPlaceholderTextstringNonullPlaceholder text for inline filter
inputIdPrefixstringNo''Prefix for the id of the input in the checkbox select variant
isCheckboxSelectionBadgeHiddenbooleanNoFlag indicating if selection badge should be hidden for checkbox variant,default false
isCreatablebooleanNofalseFlag to indicate if the typeahead select allows new items
isDisabledbooleanNofalseFlag to indicate if select is disabled
isGroupedbooleanNofalseFlag to indicate if select options are grouped
isOpenbooleanNofalseFlag to indicate if select is open
isPlainbooleanNofalseDisplay the toggle with no border or background
maxHeightstring | numberNoMax height of the select container as a number of px or string percentage
menuAppendToNo type infoNo'inline'
noResultsFoundTextstringNo'No results found'Text to display in typeahead select when no results are found
onClear(event: React.MouseEvent) => voidNo() => undefined as voidCallback for typeahead clear button
onCreateOption(newOptionValue: string) => voidNo() => undefined as voidOptional callback for newly created options
onFavorite(itemId: string, isFavorite: boolean) => voidNoEnables favorites. Callback called when a select options's favorite button is clicked
onFilter(e: React.ChangeEvent<HTMLInputElement>) => React.ReactElement[]NonullOptional callback for custom filtering
onSelect( event: React.MouseEvent | React.ChangeEvent, value: string | SelectOptionObject, isPlaceholder?: boolean ) => voidNoCallback for selection behavior
onToggle(isExpanded: boolean) => voidYesCallback for toggle button behavior
ouiaSafeNo type infoNotrue
placeholderTextstring | React.ReactNodeNo''Title text of Select
removeSelectionAriaLabelstringNo'Remove'Label for remove chip button of multiple type ahead select variant
selectionsstring | SelectOptionObject | (string | SelectOptionObject)[]No[]Array of selected items for multi select variants.
toggleAriaLabelstringNo'Options menu'Label for toggle of type ahead select variants
toggleIconReact.ReactElementNonullIcon element to render inside the select toggle
toggleIdstringNonullId for select toggle element
typeAheadAriaLabelstringNo''Label for input field of type ahead select variants
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
SelectOption properties
NameTypeRequiredDefaultDescription
ariaIsFavoriteLabelstringNoAria label text for favoritable button when favorited
ariaIsNotFavoriteLabelstringNoAria label text for favoritable button when not favorited
childrenReact.ReactNodeNoOptional alternate display for the option
classNamestringNo''Additional classes added to the Select Option
componentReact.ReactNodeNo'button'Indicates which component will be used as select item
descriptionReact.ReactNodeNoDescription of the item for single and both typeahead select variants
idstringNoID of the item. Required for tracking favorites
indexnumberNo0Internal index of the option
inputIdstringNo''Id of the checkbox input
isCheckedbooleanNofalseInternal flag indicating if the option is checked
isDisabledbooleanNofalseFlag indicating if the option is disabled
isFavoritebooleanNonullInternal Flag indicating if the option is favorited
isFocusedbooleanNoFlag forcing the focused state
isNoResultsOptionbooleanNofalseFlag indicating if the option acts as a "no results" indicator
isPlaceholderbooleanNofalseFlag indicating if the option acts as a placeholder
isSelectedbooleanNofalseInternal flag indicating if the option is selected
keyHandler(index: number, innerIndex: number, position: string) => voidNo() => {}Internal callback for keyboard navigation
onClick(event: React.MouseEvent | React.ChangeEvent) => voidNo() => {}Optional callback for click event
sendRef( ref: React.ReactNode, favoriteRef: React.ReactNode, optionContainerRef: React.ReactNode, index: number ) => voidNo() => {}Internal callback for ref tracking
valuestring | SelectOptionObjectNo''The value for the option, can be a string or select option object
SelectGroup properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNo[]Checkboxes within group. Must be React.ReactElement<SelectOptionProps>[]
classNamestringNo''Additional classes added to the CheckboxSelectGroup control
labelstringNo''Group label
titleIdstringNo''ID for title label
SelectOptionObject properties
NameTypeRequiredDefaultDescription
compareToNo type infoNoFunction returns a true if the passed in select option is equal to this select option object, false otherwise
toStringNo type infoYesFunction returns a string to represent the select option object

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--BorderWidth
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--active--before--BorderBottomColor
#06c
.pf-c-select--pf-c-select__toggle--m-expanded--before--BorderBottomColor
#06c
.pf-c-select--pf-c-select__toggle--focus--before--BorderBottomWidth
2px
.pf-c-select--pf-c-select__toggle--active--before--BorderBottomWidth
2px
.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__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
none
.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 - 1px)
.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-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__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-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-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--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__menu-search + .pf-c-divider--pf-c-select-menu--c-divider--MarginTop
0
.pf-c-select__toggle.pf-m-disabled--pf-c-select__toggle--BackgroundColor
#f0f0f0
.pf-c-select__toggle:hover::before--pf-c-select__toggle--before--BorderBottomColor
#06c
.pf-c-select__toggle:focus::before--pf-c-select__toggle--before--BorderBottomColor
#06c
.pf-c-select__toggle:active::before--pf-c-select__toggle--before--BorderBottomColor
#06c
.pf-m-expanded > .pf-c-select__toggle::before--pf-c-select__toggle--before--BorderBottomColor
#06c
.pf-c-select__toggle.pf-m-typeahead--pf-c-select__toggle--PaddingTop
0
.pf-c-select__toggle.pf-m-typeahead--pf-c-select__toggle--PaddingRight
0
.pf-c-select__toggle.pf-m-typeahead--pf-c-select__toggle--PaddingBottom
0
.pf-c-select__menu-wrapper.pf-m-favorite .pf-c-select__menu-item.pf-m-favorite-action--pf-c-select__menu-item--Color
#f0ab00
.pf-c-select__menu-item:hover--pf-c-select__menu-item--m-action--Color
#6a6e73
.pf-c-select__menu-item.pf-m-link--pf-c-select__menu-item--PaddingRight
0
.pf-c-select__menu-item.pf-m-link--pf-c-select__menu-item-main--PaddingRight
0
.pf-c-select__menu-item.pf-m-link--pf-c-select__menu-item-description--PaddingRight
0
.pf-c-select__menu-item.pf-m-link--pf-c-select__menu-item--Width
auto
.pf-c-select__menu-item.pf-m-link--pf-c-select__menu-item--hover--BackgroundColor
transparent
.pf-c-select__menu-item.pf-m-link--pf-c-select__menu-item--focus--BackgroundColor
transparent
.pf-c-select__menu-item.pf-m-action--pf-c-select__menu-item--Color
#d2d2d2
.pf-c-select__menu-item.pf-m-action--pf-c-select__menu-item--Width
auto
.pf-c-select__menu-item.pf-m-action--pf-c-select__menu-item--hover--BackgroundColor
transparent
.pf-c-select__menu-item.pf-m-action--pf-c-select__menu-item--focus--BackgroundColor
transparent
.pf-c-select__menu-item.pf-m-action:hover--pf-c-select__menu-item--m-action--Color
#151515
.pf-c-select__menu-item.pf-m-action:focus--pf-c-select__menu-item--m-action--Color
#151515
.pf-c-select__menu-item.pf-m-selected--pf-c-select__menu-item--PaddingRight
3rem
.pf-c-select__menu-item.pf-m-selected--pf-c-select__menu-item-main--PaddingRight
3rem
.pf-c-select__menu-item.pf-m-description:not(.pf-c-check)--pf-c-select__menu-item--PaddingRight
0

View source on GitHub