Select

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

Examples Props CSS Variables

Examples

Single

isDisabled

Expands up

Show icon

Grouped single

Checkbox input

Checkbox input no badge

Grouped checkbox input

Grouped checkbox input with filtering

Filter by status

Grouped checkbox input with filtering

Filter by status

Grouped checkbox input with filtering

Filter by status

Grouped checkbox input with filtering

Filter by status

Typeahead

isDisabled

isCreatable

onCreateOption

Custom filtering

Multiple

isCreatable

onCreateOption

Multiple with custom objects

Plain multiple typeahead

Panel

isDisabled

Expands up

Props

Select properties
Name	Type	Required	Default	Description
children	React.ReactElement[]	No	[]	Content rendered inside the Select
className	string	No	''	Classes applied to the root of the Select
direction	'up' \| 'down'	No	SelectDirection.down	Flag specifying which direction the Select menu expands
isOpen	boolean	No	false	Flag to indicate if select is open
isGrouped	boolean	No	false	Flag to indicate if select options are grouped
isPlain	boolean	No	false	Display the toggle with no border or background
isDisabled	boolean	No	false	Flag to indicate if select is disabled
isCreatable	boolean	No	false	Flag to indicate if the typeahead select allows new items
createText	string	No	'Create'	Text displayed in typeahead select to prompt the user to create an item
placeholderText	string \| React.ReactNode	No	''	Title text of Select
noResultsFoundText	string	No	'No results found'	Text to display in typeahead select when no results are found
selection	string \| SelectOptionObject	No	''	Selected item for single select variants.
selections	string[] \| SelectOptionObject[]	No	[]	Array of selected items for multi select variants.
isCheckboxSelectionBadgeHidden	boolean	No		Flag indicating if selection badge should be hidden for checkbox variant,default false
toggleId	string	No	null	Id for select toggle element
aria-label	string	No	''	Adds accessible text to Select
aria-labelledby	string	No	''	Id of label for the Select aria-labelledby
typeAheadAriaLabel	string	No	''	Label for input field of type ahead select variants
clearSelectionsAriaLabel	string	No	'Clear all'	Label for clear selection button of type ahead select variants
toggleAriaLabel	string	No	'Options menu'	Label for toggle of type ahead select variants
removeSelectionAriaLabel	string	No	'Remove'	Label for remove chip button of multiple type ahead select variant
onSelect	( event: React.MouseEvent \| React.ChangeEvent, value: string \| SelectOptionObject, isPlaceholder?: boolean ) => void	No		Callback for selection behavior
onToggle	(isExpanded: boolean) => void	Yes		Callback for toggle button behavior
onClear	(event: React.MouseEvent) => void	No	() => undefined as void	Callback for typeahead clear button
onFilter	(e: React.ChangeEvent<HTMLInputElement>) => React.ReactElement[]	No	null	Optional callback for custom filtering
onCreateOption	(newOptionValue: string) => void	No	() => undefined as void	Optional callback for newly created options
variant	'single' \| 'checkbox' \| 'typeahead' \| 'typeaheadmulti'	No	SelectVariant.single	Variant of rendered Select
width	string \| number	No	''	Width of the select container as a number of px or string percentage
maxHeight	string \| number	No		Max height of the select container as a number of px or string percentage
toggleIcon	React.ReactElement	No	null	Icon element to render inside the select toggle
customContent	React.ReactNode	No	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
hasInlineFilter	boolean	No	false	Flag indicating if select should have an inline text input for filtering

SelectOption properties
Name	Type	Required	Default	Description
children	React.ReactNode	No		Optional alternate display for the option
className	string	No	''	Additional classes added to the Select Option
index	number	No	0	Internal index of the option
component	React.ReactNode	No	'button'	Indicates which component will be used as select item
value	string \| SelectOptionObject	No	''	The value for the option, can be a string or select option object
isDisabled	boolean	No	false	Flag indicating if the option is disabled
isPlaceholder	boolean	No	false	Flag indicating if the option acts as a placeholder
isNoResultsOption	boolean	No	false	Flad indicating if the option acts as a "no results" indicator
isSelected	boolean	No	false	Internal flag indicating if the option is selected
isChecked	boolean	No	false	Internal flag indicating if the option is checked
sendRef	(ref: React.ReactNode, index: number) => void	No	() => {}	Internal callback for ref tracking
keyHandler	(index: number, position: string) => void	No	() => {}	Internal callback for keyboard navigation
onClick	(event: React.MouseEvent \| React.ChangeEvent) => void	No	() => {}	Optional callback for click event

SelectGroup properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	[]	Checkboxes within group
className	string	No	''	Additional classes added to the CheckboxSelectGroup control
label	string	No	''	Group label
titleId	string	No	''	ID for title label

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--BorderWidth	1px
--pf-c-select__toggle--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-select	--pf-c-select__toggle--BorderTopColor	#f0f0f0
--pf-c-select__toggle--BorderTopColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-select	--pf-c-select__toggle--BorderRightColor	#f0f0f0
--pf-c-select__toggle--BorderRightColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-select	--pf-c-select__toggle--BorderBottomColor	#8a8d90
--pf-c-select__toggle--BorderBottomColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-select	--pf-c-select__toggle--BorderLeftColor	#f0f0f0
--pf-c-select__toggle--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--BorderBottomColor	#06c
--pf-c-select__toggle--hover--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-select	--pf-c-select__toggle--active--BorderBottomWidth	2px
--pf-c-select__toggle--active--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-select	--pf-c-select__toggle--active--BorderBottomColor	#06c
--pf-c-select__toggle--active--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-select	--pf-c-select__toggle--expanded--BorderBottomWidth	2px
--pf-c-select__toggle--expanded--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-select	--pf-c-select__toggle--expanded--BorderBottomColor	#06c
--pf-c-select__toggle--expanded--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.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--BorderColor	transparent
	.pf-c-select	--pf-c-select__toggle--m-plain--Color	#151515
--pf-c-select__toggle--m-plain--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-select	--pf-c-select__toggle--m-plain--hover--Color	#151515
--pf-c-select__toggle--m-plain--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-select	--pf-c-select__toggle-wrapper--m-typeahead--PaddingTop	0
	.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.5rem
--pf-c-select__toggle-wrapper--c-chip-group--MarginTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-select	--pf-c-select__toggle-wrapper--c-chip-group--MarginBottom	0.25rem
--pf-c-select__toggle-wrapper--c-chip-group--MarginBottom --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-select	--pf-c-select__toggle-wrapper--c-chip--c-button--PaddingTop	0.25rem
--pf-c-select__toggle-wrapper--c-chip--c-button--PaddingTop --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-select	--pf-c-select__toggle-wrapper--c-chip--c-button--PaddingBottom	0.25rem
--pf-c-select__toggle-wrapper--c-chip--c-button--PaddingBottom --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.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-form--MinWidth	7.5rem
	.pf-c-select	--pf-c-select__toggle-typeahead--active--PaddingBottom	calc(0.375rem - 1px)
--pf-c-select__toggle-typeahead--active--PaddingBottom calc(--pf-global--spacer--form-element - --pf-global--BorderWidth--sm) calc($pf-global--spacer--form-element - $pf-global--BorderWidth--sm) calc(pf-size-prem(6px) - 1px) calc(0.375rem - 1px)
	.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-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--Transform	rotate(180deg)
	.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-button--PaddingLeft	0.5rem
--pf-c-select__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--m-top--Transform	translateY(calc(-100% - 0.25rem))
--pf-c-select__menu--m-top--Transform translateY(calc(-100% - --pf-global--spacer--xs)) translateY(calc(-100% - $pf-global--spacer--xs)) translateY(calc(-100% - pf-size-prem(4px))) translateY(calc(-100% - 0.25rem))
	.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--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--disabled--BackgroundColor	transparent
	.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--Transform	translateY(-50%)
	.pf-c-select	--pf-c-select__menu-item--match--FontWeight	600
--pf-c-select__menu-item--match--FontWeight --pf-global--FontWeight--bold $pf-global--FontWeight--bold 600
	.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	500
--pf-c-select__menu-group-title--FontWeight --pf-global--FontWeight--semi-bold $pf-global--FontWeight--semi-bold 500
	.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--c-divider--MarginTop	0.5rem
--pf-c-select-menu--c-divider--MarginTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-select	--pf-c-select-menu--c-divider--MarginBottom	0.5rem
--pf-c-select-menu--c-divider--MarginBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 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--BackgroundColor --pf-c-select__toggle--disabled--BackgroundColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #f0f0f0
	.pf-c-select__toggle:hover::before	--pf-c-select__toggle--BorderBottomColor	#06c
--pf-c-select__toggle--BorderBottomColor --pf-c-select__toggle--hover--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-select__toggle:active::before	--pf-c-select__toggle--BorderBottomColor	#06c
--pf-c-select__toggle--BorderBottomColor --pf-c-select__toggle--active--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-m-expanded > .pf-c-select__toggle::before	--pf-c-select__toggle--BorderBottomColor	#06c
--pf-c-select__toggle--BorderBottomColor --pf-c-select__toggle--expanded--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-select__toggle.pf-m-plain	--pf-c-select__toggle--Color	#151515
--pf-c-select__toggle--Color --pf-c-select__toggle--m-plain--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-select__toggle.pf-m-plain:hover	--pf-c-select__toggle--Color	#151515
--pf-c-select__toggle--Color --pf-c-select__toggle--m-plain--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.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-item.pf-m-selected	--pf-c-select__menu-item--PaddingRight	3rem
--pf-c-select__menu-item--PaddingRight --pf-c-select__menu-item--m-selected--PaddingRight --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem