Select

Examples

Single

isDisabled

Expands up

Show icon

Single with description

Grouped single

Validated

Checkbox input

Checkbox input with counts

Checkbox input no badge

Grouped checkbox input

Grouped single with filtering

isInputValuePersisted

isInputFilterPersisted

isCreatable

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

Grouped typeahead

isCreatable

onCreateOption

Custom filtering

Multiple

isCreatable

onCreateOption

isDisabled (1st option only)

shouldResetOnSelect

Multiple with Custom Chip Group Props

Multiple with Render Custom Chip Group

Multiple with custom objects

Plain multiple typeahead

Panel

isDisabled

Expands up

Appending document body vs parent

Avoid passing in document.body when passing a value to the menuAppendTo prop on the Select component, as it can cause accessibility issues. These issues can include, but are not limited to, being unable to enter the contents of the Select options via assistive technologies (like keyboards or screen readers).

Instead append to "parent" to achieve the same result without sacrificing accessibility.

In this example, while, when the dropdown is opened, both Select variants handle focus management within their dropdown contents the same way, you'll notice a difference when you try pressing the Tab key after selecting an option.

For the document.body variant, the focus will be placed at the end of the page, since that is where the dropdown content is appended to in the DOM (rather than focus being placed on the second Select variant as one might expect). For the "parent" variant, however, the focus will be placed on the next tab-able element (the "Toggle JS code" button for the code editor in this case).

Favorites

View more Beta

View more with checkboxes Beta

With a style applied to the placeholder text

Filter by status

With a style applied to the placeholder option

Filter by status

Props

Select

*required
Name	Type	Default	Description
onTogglerequired	(isExpanded: boolean, event: React.MouseEvent \| React.ChangeEvent \| React.KeyboardEvent \| Event) => void		Callback for toggle button behavior
aria-describedby	string	''	Id of div for the select aria-labelledby
aria-invalid	boolean	false	Flag indicating if the select is an invalid state
aria-label	string	''	Adds accessible text to Select
aria-labelledby	string	''	Id of label for the Select aria-labelledby
children	React.ReactElement[]	[]	Content rendered inside the Select. Must be React.ReactElement<SelectGroupProps>[]
chipGroupComponent	React.ReactNode	null	Optional props to render custom chip group in the typeaheadmulti variant
chipGroupProps	Omit<ChipGroupProps, 'children' \| 'ref'>		Optional props to pass to the chip group in the typeaheadmulti variant
className	string	''	Classes applied to the root of the Select
clearSelectionsAriaLabel	string	'Clear all'	Label for clear selection button of type ahead select variants
createText	string	'Create'	Text displayed in typeahead select to prompt the user to create an item
customBadgeText	string \| number	null	Custom text for select badge
customContent	React.ReactNode	null	Custom 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'	SelectDirection.down	Flag specifying which direction the Select menu expands
favorites	string[]	[]	ID list of favorited select items
favoritesLabel	string	'Favorites'	Label for the favorites group
footer	React.ReactNode		Content rendered in the footer of the select menu
hasInlineFilter	boolean	false	Flag indicating if select should have an inline text input for filtering
hasPlaceholderStyle	boolean	false	Flag indicating if placeholder styles should be applied
inlineFilterPlaceholderText	string	null	Placeholder text for inline filter
inputAutoComplete	string	'off'	Value for the typeahead and inline filtering input autocomplete attribute. When targeting Chrome this property should be a random string.
inputIdPrefix	string	''	Prefix for the id of the input in the checkbox select variant
isCheckboxSelectionBadgeHidden	boolean		Flag indicating if selection badge should be hidden for checkbox variant,default false
isCreatable	boolean	false	Flag to indicate if the typeahead select allows new items
isCreateSelectOptionObjectBeta	boolean	false	Flag indicating if the creatable option should set its value as a SelectOptionObject
isDisabled	boolean	false	Flag to indicate if select is disabled
isFlipEnabled	boolean	false	Flag for indicating that the select menu should automatically flip vertically when it reaches the boundary. This prop can only be used when the select component is not appended inline, e.g. `menuAppendTo="parent"`
isGrouped	boolean	false	Flag to indicate if select options are grouped
isInputFilterPersistedBeta	boolean	false	Flag for retaining filter results on blur from keyboard-entered typeahead text
isInputValuePersisted	boolean	false	Flag for retaining keyboard-entered value in typeahead text field when focus leaves input away
isOpen	boolean	false	Flag to indicate if select is open
isPlain	boolean	false	Display the toggle with no border or background
loadingVariantBeta	'spinner' \| SelectViewMoreObject		Loading variant to display either the spinner or the view more text button
maxHeight	string \| number		Max height of the select container as a number of px or string percentage
menuAppendTo	HTMLElement \| (() => HTMLElement) \| 'inline' \| 'parent'	'inline'	The container to append the menu to. Defaults to 'inline'. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: menuAppendTo="parent" menuAppendTo={() => document.body} menuAppendTo={document.getElementById('target')}
noResultsFoundText	string	'No results found'	Text to display in typeahead select when no results are found
onBlur	(event?: any) => void		Callback for toggle blur
onClear	(event: React.MouseEvent) => void	() => undefined as void	Callback for typeahead clear button
onCreateOption	(newOptionValue: string) => void	() => undefined as void	Optional callback for newly created options
onFavorite	(itemId: string, isFavorite: boolean) => void		Enables favorites. Callback called when a select options's favorite button is clicked
onFilter	(e: React.ChangeEvent<HTMLInputElement> \| null, value: string) => React.ReactElement[] \| undefined	null	Optional callback for custom filtering
onSelect	( event: React.MouseEvent \| React.ChangeEvent, value: string \| SelectOptionObject, isPlaceholder?: boolean ) => void		Callback for selection behavior
onTypeaheadInputChanged	(value: string) => void	null	Optional event handler called each time the value in the typeahead input changes.
ouiaSafe	No type info	true
placeholderText	string \| React.ReactNode	''	Title text of Select
position	SelectPosition \| 'right' \| 'left'	SelectPosition.left	Indicates where menu will be aligned horizontally
removeSelectionAriaLabel	string	'Remove'	Label for remove chip button of multiple type ahead select variant
selections	string \| SelectOptionObject \| (string \| SelectOptionObject)[]	[]	Array of selected items for multi select variants.
shouldResetOnSelect	boolean	true	Flag indicating the typeahead input value should reset upon selection
toggleAriaLabel	string	'Options menu'	Label for toggle of type ahead select variants
toggleIcon	React.ReactElement	null	Icon element to render inside the select toggle
toggleId	string	null	Id for select toggle element
typeAheadAriaDescribedby	string	''	Id of div for input field of type ahead select variants
typeAheadAriaLabel	string	''	Label for input field of type ahead select variants
validated	'success' \| 'warning' \| 'error' \| 'default'	'default'	Value to indicate if the select is modified to show that validation state. If set to success, select will be modified to indicate valid state. If set to error, select will be modified to indicate error state. If set to warning, select will be modified to indicate warning state.
variant	'single' \| 'checkbox' \| 'typeahead' \| 'typeaheadmulti'	SelectVariant.single	Variant of rendered Select
width	string \| number	''	Width of the select container as a number of px or string percentage

SelectOption

*required
Name	Type	Default	Description
ariaIsFavoriteLabel	string		Aria label text for favoritable button when favorited
ariaIsNotFavoriteLabel	string		Aria label text for favoritable button when not favorited
children	React.ReactNode		Optional alternate display for the option
className	string	''	Additional classes added to the Select Option
component	React.ReactNode	'button'	Indicates which component will be used as select item
description	React.ReactNode		Description of the item for single and both typeahead select variants
id	string		ID of the item. Required for tracking favorites
inputId	string	''	Id of the checkbox input
isDisabled	boolean	false	Flag indicating if the option is disabled
isFocused	boolean		Flag forcing the focused state
isNoResultsOption	boolean	false	Flag indicating if the option acts as a "no results" indicator
isPlaceholder	boolean	false	Flag indicating if the option acts as a placeholder
itemCount	number		Number of items matching the option
onClick	(event: React.MouseEvent \| React.ChangeEvent) => void	() => {}	Optional callback for click event
value	string \| SelectOptionObject	''	The value for the option, can be a string or select option object

SelectGroup

*required
Name	Type	Default	Description
children	React.ReactNode	[]	Checkboxes within group. Must be React.ReactElement<SelectOptionProps>[]
className	string	''	Additional classes added to the CheckboxSelectGroup control
label	string	''	Group label
titleId	string	''	ID for title label

SelectOptionObject

*required
Name	Type	Default	Description
toStringrequired	string		Function returns a string to represent the select option object
compareTo	boolean		Function returns a true if the passed in select option is equal to this select option object, false otherwise

SelectViewMoreObject

*required
Name	Type	Default	Description
onClickrequired	(event: React.MouseEvent \| React.ChangeEvent) => void		Callback for when the view more button is clicked
textrequired	string		View more text

CSS variables


	.pf-c-select	--pf-global--Color--100	#151515
--pf-global--Color--100 --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-select	--pf-global--Color--200	#6a6e73
--pf-global--Color--200 --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-select	--pf-global--BorderColor--100	#d2d2d2
--pf-global--BorderColor--100 --pf-global--BorderColor--dark-100 $pf-global--BorderColor--dark-100 $pf-color-black-300 #d2d2d2
	.pf-c-select	--pf-global--primary-color--100	#06c
--pf-global--primary-color--100 --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-select	--pf-global--link--Color	#06c
--pf-global--link--Color --pf-global--link--Color--dark $pf-global--link--Color--dark $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-select	--pf-global--link--Color--hover	#004080
--pf-global--link--Color--hover --pf-global--link--Color--dark--hover $pf-global--link--Color--dark--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-select	--pf-global--BackgroundColor--100	#fff
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-select	--pf-c-select__toggle--PaddingTop	0.375rem
--pf-c-select__toggle--PaddingTop --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-select	--pf-c-select__toggle--PaddingRight	0.5rem
--pf-c-select__toggle--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-select	--pf-c-select__toggle--PaddingBottom	0.375rem
--pf-c-select__toggle--PaddingBottom --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-select	--pf-c-select__toggle--PaddingLeft	0.5rem
--pf-c-select__toggle--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-select	--pf-c-select__toggle--MinWidth	44px
--pf-c-select__toggle--MinWidth --pf-global--target-size--MinWidth $pf-global--target-size--MinWidth 44px
	.pf-c-select	--pf-c-select__toggle--FontSize	1rem
--pf-c-select__toggle--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-select	--pf-c-select__toggle--FontWeight	400
--pf-c-select__toggle--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-select	--pf-c-select__toggle--LineHeight	1.5
--pf-c-select__toggle--LineHeight --pf-global--LineHeight--md $pf-global--LineHeight--md 1.5
	.pf-c-select	--pf-c-select__toggle--BackgroundColor	#fff
--pf-c-select__toggle--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-select	--pf-c-select__toggle--before--BorderTopWidth	1px
--pf-c-select__toggle--before--BorderTopWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-select	--pf-c-select__toggle--before--BorderRightWidth	1px
--pf-c-select__toggle--before--BorderRightWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-select	--pf-c-select__toggle--before--BorderBottomWidth	1px
--pf-c-select__toggle--before--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-select	--pf-c-select__toggle--before--BorderLeftWidth	1px
--pf-c-select__toggle--before--BorderLeftWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-select	--pf-c-select__toggle--before--BorderWidth	initial
	.pf-c-select	--pf-c-select__toggle--before--BorderTopColor	#f0f0f0
--pf-c-select__toggle--before--BorderTopColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-select	--pf-c-select__toggle--before--BorderRightColor	#f0f0f0
--pf-c-select__toggle--before--BorderRightColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-select	--pf-c-select__toggle--before--BorderBottomColor	#8a8d90
--pf-c-select__toggle--before--BorderBottomColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-select	--pf-c-select__toggle--before--BorderLeftColor	#f0f0f0
--pf-c-select__toggle--before--BorderLeftColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-select	--pf-c-select__toggle--Color	#151515
--pf-c-select__toggle--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-select	--pf-c-select__toggle--hover--before--BorderBottomColor	#06c
--pf-c-select__toggle--hover--before--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-select	--pf-c-select__toggle--focus--before--BorderBottomColor	#06c
--pf-c-select__toggle--focus--before--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-select	--pf-c-select__toggle--focus--before--BorderBottomWidth	2px
--pf-c-select__toggle--focus--before--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-select	--pf-c-select__toggle--active--before--BorderBottomColor	#06c
--pf-c-select__toggle--active--before--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-select	--pf-c-select__toggle--active--before--BorderBottomWidth	2px
--pf-c-select__toggle--active--before--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-select	--pf-c-select__toggle--m-expanded--before--BorderBottomColor	#06c
--pf-c-select__toggle--m-expanded--before--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-select	--pf-c-select__toggle--m-expanded--before--BorderBottomWidth	2px
--pf-c-select__toggle--m-expanded--before--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-select	--pf-c-select__toggle--disabled--BackgroundColor	#f0f0f0
--pf-c-select__toggle--disabled--BackgroundColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #f0f0f0
	.pf-c-select	--pf-c-select__toggle--m-plain--before--BorderColor	transparent
	.pf-c-select	--pf-c-select__toggle--m-placeholder--Color	transparent
	.pf-c-select	--pf-c-select--m-invalid__toggle--before--BorderBottomColor	#c9190b
--pf-c-select--m-invalid__toggle--before--BorderBottomColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-select	--pf-c-select--m-invalid__toggle--before--BorderBottomWidth	2px
--pf-c-select--m-invalid__toggle--before--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-select	--pf-c-select--m-invalid__toggle--hover--before--BorderBottomColor	#c9190b
--pf-c-select--m-invalid__toggle--hover--before--BorderBottomColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-select	--pf-c-select--m-invalid__toggle--focus--before--BorderBottomColor	#c9190b
--pf-c-select--m-invalid__toggle--focus--before--BorderBottomColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-select	--pf-c-select--m-invalid__toggle--active--before--BorderBottomColor	#c9190b
--pf-c-select--m-invalid__toggle--active--before--BorderBottomColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-select	--pf-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor	#c9190b
--pf-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-select	--pf-c-select--m-invalid__toggle-status-icon--Color	#c9190b
--pf-c-select--m-invalid__toggle-status-icon--Color --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-select	--pf-c-select--m-success__toggle--before--BorderBottomColor	#3e8635
--pf-c-select--m-success__toggle--before--BorderBottomColor --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-select	--pf-c-select--m-success__toggle--before--BorderBottomWidth	2px
--pf-c-select--m-success__toggle--before--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-select	--pf-c-select--m-success__toggle--hover--before--BorderBottomColor	#3e8635
--pf-c-select--m-success__toggle--hover--before--BorderBottomColor --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-select	--pf-c-select--m-success__toggle--focus--before--BorderBottomColor	#3e8635
--pf-c-select--m-success__toggle--focus--before--BorderBottomColor --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-select	--pf-c-select--m-success__toggle--active--before--BorderBottomColor	#3e8635
--pf-c-select--m-success__toggle--active--before--BorderBottomColor --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-select	--pf-c-select--m-success__toggle--m-expanded--before--BorderBottomColor	#3e8635
--pf-c-select--m-success__toggle--m-expanded--before--BorderBottomColor --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-select	--pf-c-select--m-success__toggle-status-icon--Color	#3e8635
--pf-c-select--m-success__toggle-status-icon--Color --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-select	--pf-c-select--m-warning__toggle--before--BorderBottomColor	#f0ab00
--pf-c-select--m-warning__toggle--before--BorderBottomColor --pf-global--warning-color--100 $pf-global--warning-color--100 $pf-color-gold-400 #f0ab00
	.pf-c-select	--pf-c-select--m-warning__toggle--before--BorderBottomWidth	2px
--pf-c-select--m-warning__toggle--before--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-select	--pf-c-select--m-warning__toggle--hover--before--BorderBottomColor	#f0ab00
--pf-c-select--m-warning__toggle--hover--before--BorderBottomColor --pf-global--warning-color--100 $pf-global--warning-color--100 $pf-color-gold-400 #f0ab00
	.pf-c-select	--pf-c-select--m-warning__toggle--focus--before--BorderBottomColor	#f0ab00
--pf-c-select--m-warning__toggle--focus--before--BorderBottomColor --pf-global--warning-color--100 $pf-global--warning-color--100 $pf-color-gold-400 #f0ab00
	.pf-c-select	--pf-c-select--m-warning__toggle--active--before--BorderBottomColor	#f0ab00
--pf-c-select--m-warning__toggle--active--before--BorderBottomColor --pf-global--warning-color--100 $pf-global--warning-color--100 $pf-color-gold-400 #f0ab00
	.pf-c-select	--pf-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor	#f0ab00
--pf-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor --pf-global--warning-color--100 $pf-global--warning-color--100 $pf-color-gold-400 #f0ab00
	.pf-c-select	--pf-c-select--m-warning__toggle-status-icon--Color	#f0ab00
--pf-c-select--m-warning__toggle-status-icon--Color --pf-global--warning-color--100 $pf-global--warning-color--100 $pf-color-gold-400 #f0ab00
	.pf-c-select	--pf-c-select__toggle-wrapper--not-last-child--MarginRight	0.25rem
--pf-c-select__toggle-wrapper--not-last-child--MarginRight --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-select	--pf-c-select__toggle-wrapper--MaxWidth	calc(100% - 1.5rem)
--pf-c-select__toggle-wrapper--MaxWidth calc(100% - --pf-global--spacer--lg) calc(100% - $pf-global--spacer--lg) calc(100% - pf-size-prem(24px)) 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	1px solid transparent
--pf-c-select__toggle-typeahead--BorderTop --pf-global--BorderWidth--sm solid transparent $pf-global--BorderWidth--sm solid transparent 1px solid transparent
	.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 - 2px)
--pf-c-select__toggle-typeahead--focus--PaddingBottom calc(--pf-global--spacer--form-element - --pf-global--BorderWidth--md) calc($pf-global--spacer--form-element - $pf-global--BorderWidth--md) calc(pf-size-prem(6px) - 2px) calc(0.375rem - 2px)
	.pf-c-select	--pf-c-select__toggle--m-placeholder__toggle-text--Color	#6a6e73
--pf-c-select__toggle--m-placeholder__toggle-text--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-select	--pf-c-select__toggle-icon--toggle-text--MarginLeft	0.25rem
--pf-c-select__toggle-icon--toggle-text--MarginLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-select	--pf-c-select__toggle-badge--PaddingLeft	0.5rem
--pf-c-select__toggle-badge--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-select	--pf-c-select__toggle-status-icon--MarginLeft	0.25rem
--pf-c-select__toggle-status-icon--MarginLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-select	--pf-c-select__toggle-status-icon--Color	#151515
--pf-c-select__toggle-status-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-select	--pf-c-select__toggle-arrow--MarginLeft	1rem
--pf-c-select__toggle-arrow--MarginLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-select	--pf-c-select__toggle-arrow--MarginRight	0.5rem
--pf-c-select__toggle-arrow--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-select	--pf-c-select__toggle-arrow--with-clear--MarginLeft	0.5rem
--pf-c-select__toggle-arrow--with-clear--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-select	--pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate	180deg
	.pf-c-select	--pf-c-select--m-plain__toggle-arrow--Color	#6a6e73
--pf-c-select--m-plain__toggle-arrow--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-select	--pf-c-select--m-plain--hover__toggle-arrow--Color	#151515
--pf-c-select--m-plain--hover__toggle-arrow--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-select	--pf-c-select__toggle-clear--PaddingRight	0.5rem
--pf-c-select__toggle-clear--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-select	--pf-c-select__toggle-clear--PaddingLeft	1rem
--pf-c-select__toggle-clear--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-select	--pf-c-select__toggle-clear--toggle-button--PaddingLeft	0.5rem
--pf-c-select__toggle-clear--toggle-button--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-select	--pf-c-select__toggle-button--Color	#151515
--pf-c-select__toggle-button--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-select	--pf-c-select__menu--BackgroundColor	#fff
--pf-c-select__menu--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #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__menu--BoxShadow --pf-global--BoxShadow--md $pf-global--BoxShadow--md 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-color-black-1000, .06) 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba(#030303, .12), 0 0 pf-size-prem(4px) 0 rgba(#030303, .06) 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__menu--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-select	--pf-c-select__menu--PaddingBottom	0.5rem
--pf-c-select__menu--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-select	--pf-c-select__menu--Top	calc(100% + 0.25rem)
--pf-c-select__menu--Top calc(100% + --pf-global--spacer--xs) calc(100% + $pf-global--spacer--xs) calc(100% + pf-size-prem(4px)) calc(100% + 0.25rem)
	.pf-c-select	--pf-c-select__menu--ZIndex	200
--pf-c-select__menu--ZIndex --pf-global--ZIndex--sm $pf-global--ZIndex--sm 200
	.pf-c-select	--pf-c-select__menu--Width	auto
	.pf-c-select	--pf-c-select__menu--MinWidth	100%
	.pf-c-select	--pf-c-select__menu--m-top--TranslateY	calc(-100% - 0.25rem)
--pf-c-select__menu--m-top--TranslateY calc(-100% - --pf-global--spacer--xs) calc(-100% - $pf-global--spacer--xs) calc(-100% - pf-size-prem(4px)) calc(-100% - 0.25rem)
	.pf-c-select	--pf-c-select__list-item--m-loading--PaddingTop	0.5rem
--pf-c-select__list-item--m-loading--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-select	--pf-c-select__menu-item--PaddingTop	0.5rem
--pf-c-select__menu-item--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-select	--pf-c-select__menu-item--PaddingRight	1rem
--pf-c-select__menu-item--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-select	--pf-c-select__menu-item--m-selected--PaddingRight	3rem
--pf-c-select__menu-item--m-selected--PaddingRight --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-c-select	--pf-c-select__menu-item--PaddingBottom	0.5rem
--pf-c-select__menu-item--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-select	--pf-c-select__menu-item--PaddingLeft	1rem
--pf-c-select__menu-item--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-select	--pf-c-select__menu-item--FontSize	1rem
--pf-c-select__menu-item--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-select	--pf-c-select__menu-item--FontWeight	400
--pf-c-select__menu-item--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-select	--pf-c-select__menu-item--LineHeight	1.5
--pf-c-select__menu-item--LineHeight --pf-global--LineHeight--md $pf-global--LineHeight--md 1.5
	.pf-c-select	--pf-c-select__menu-item--Color	#151515
--pf-c-select__menu-item--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-select	--pf-c-select__menu-item--disabled--Color	#6a6e73
--pf-c-select__menu-item--disabled--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-select	--pf-c-select__menu-item--Width	100%
	.pf-c-select	--pf-c-select__menu-item--hover--BackgroundColor	#f0f0f0
--pf-c-select__menu-item--hover--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-select	--pf-c-select__menu-item--focus--BackgroundColor	#f0f0f0
--pf-c-select__menu-item--focus--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #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	#6a6e73
--pf-c-select__menu-item--m-action--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-select	--pf-c-select__menu-item--m-action--hover--Color	#151515
--pf-c-select__menu-item--m-action--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-select	--pf-c-select__menu-item--m-action--focus--Color	#151515
--pf-c-select__menu-item--m-action--focus--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-select	--pf-c-select__menu-item--m-action--disabled--Color	#d2d2d2
--pf-c-select__menu-item--m-action--disabled--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #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__menu-item--m-action--FontSize --pf-global--icon--FontSize--sm $pf-global--icon--FontSize--sm pf-font-prem(10px) 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__menu-item--hover__menu-item--m-action--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-select	--pf-c-select__menu-item--m-favorite-action--Color	#6a6e73
--pf-c-select__menu-item--m-favorite-action--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-select	--pf-c-select__menu-item--m-favorite-action--hover--Color	#151515
--pf-c-select__menu-item--m-favorite-action--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-select	--pf-c-select__menu-item--m-favorite-action--focus--Color	#151515
--pf-c-select__menu-item--m-favorite-action--focus--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-select	--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color	#f0ab00
--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color --pf-global--palette--gold-400 $pf-color-gold-400 #f0ab00
	.pf-c-select	--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color	#c58c00
--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color --pf-global--palette--gold-500 $pf-color-gold-500 #c58c00
	.pf-c-select	--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color	#c58c00
--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color --pf-global--palette--gold-500 $pf-color-gold-500 #c58c00
	.pf-c-select	--pf-c-select__menu-item--m-load--Color	#06c
--pf-c-select__menu-item--m-load--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-select	--pf-c-select__menu-item-icon--Color	#06c
--pf-c-select__menu-item-icon--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-select	--pf-c-select__menu-item-icon--FontSize	0.625rem
--pf-c-select__menu-item-icon--FontSize --pf-global--icon--FontSize--sm $pf-global--icon--FontSize--sm pf-font-prem(10px) 0.625rem
	.pf-c-select	--pf-c-select__menu-item-icon--Right	1rem
--pf-c-select__menu-item-icon--Right --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 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__menu-item-action-icon--MinHeight calc(--pf-c-select__menu-item--FontSize * --pf-c-select__menu-item--LineHeight) calc(--pf-global--FontSize--md * --pf-global--LineHeight--md) calc($pf-global--FontSize--md * $pf-global--LineHeight--md) calc(pf-font-prem(16px) * 1.5) calc(1rem * 1.5)
	.pf-c-select	--pf-c-select__menu-item--match--FontWeight	700
--pf-c-select__menu-item--match--FontWeight --pf-global--FontWeight--bold $pf-global--FontWeight--bold 700
	.pf-c-select	--pf-c-select__menu-search--PaddingTop	0.5rem
--pf-c-select__menu-search--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-select	--pf-c-select__menu-search--PaddingRight	1rem
--pf-c-select__menu-search--PaddingRight --pf-c-select__menu-item--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-select	--pf-c-select__menu-search--PaddingBottom	1rem
--pf-c-select__menu-search--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-select	--pf-c-select__menu-search--PaddingLeft	1rem
--pf-c-select__menu-search--PaddingLeft --pf-c-select__menu-item--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-select	--pf-c-select__menu-group--menu-group--PaddingTop	0.5rem
--pf-c-select__menu-group--menu-group--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-select	--pf-c-select__menu-group-title--PaddingTop	0.5rem
--pf-c-select__menu-group-title--PaddingTop --pf-c-select__menu-item--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-select	--pf-c-select__menu-group-title--PaddingRight	1rem
--pf-c-select__menu-group-title--PaddingRight --pf-c-select__menu-item--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-select	--pf-c-select__menu-group-title--PaddingBottom	0.5rem
--pf-c-select__menu-group-title--PaddingBottom --pf-c-select__menu-item--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-select	--pf-c-select__menu-group-title--PaddingLeft	1rem
--pf-c-select__menu-group-title--PaddingLeft --pf-c-select__menu-item--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-select	--pf-c-select__menu-group-title--FontSize	0.875rem
--pf-c-select__menu-group-title--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-select	--pf-c-select__menu-group-title--FontWeight	700
--pf-c-select__menu-group-title--FontWeight --pf-global--FontWeight--semi-bold $pf-global--FontWeight--semi-bold $pf-global--FontWeight--bold 700
	.pf-c-select	--pf-c-select__menu-group-title--Color	#6a6e73
--pf-c-select__menu-group-title--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-select	--pf-c-select__menu-item-count--MarginLeft	1rem
--pf-c-select__menu-item-count--MarginLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-select	--pf-c-select__menu-item-count--FontSize	0.875rem
--pf-c-select__menu-item-count--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-select	--pf-c-select__menu-item-count--Color	#6a6e73
--pf-c-select__menu-item-count--Color --pf-global--Color--200

Select

Examples

Single

Single with description

Grouped single

Validated

Checkbox input

Checkbox input with counts

Checkbox input no badge

Grouped checkbox input

Grouped single with filtering

Grouped checkbox input with filtering

Grouped checkbox input with filtering and placeholder text

Grouped checkbox input with filtering and custom badging

Typeahead

Grouped typeahead

Custom filtering

Multiple

Multiple with Custom Chip Group Props

Multiple with Render Custom Chip Group

Multiple with custom objects

Plain multiple typeahead

Panel

Appending document body vs parent

Favorites

Footer

Footer with checkboxes

View more Beta

View more with checkboxes Beta

With a style applied to the placeholder text

With a style applied to the placeholder option

Props

Select

SelectOption

SelectGroup

SelectOptionObject

SelectViewMoreObject

CSS variables