Select

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

Examples Documentation Usage Usage Documentation CSS Variables

Examples

Single

Disabled

Single expanded

Single with top expanded

The top select variation should be used when you want the menu to display above the toggle.

Usage

Class	Applied to	Outcome
`.pf-c-select`	`<div>`	Initiates a custom select.
`.pf-c-select__toggle`	`<button>`	Initiates a custom toggle.
`.pf-c-select__toggle-wrapper`	`<div>`	Initiates a custom select toggle wrapper.
`.pf-c-select__toggle-arrow`	`<span>`	Initiates the caret to toggle the dropdown.
`.pf-c-select__menu`	`<ul>`	Initiates the custom select dropdown menu.
`.pf-c-select__menu-item`	`<li>`	Initiates the items in the custom select dropdown menu.
`.pf-c-select__menu-item-icon`	`<i>`	Initiates the selected item icon.
`.pf-m-top`	`.pf-c-select`	Modifies the select menu to display above the toggle.

Single expanded and selected

The single select should be used when the user is selecting an option from a list of items. Although the presentation is similar to the basic dropdown, the underlying HTML and ARIA tag structure is specific to a select list. The selection will replace the default text in the toggle. The selection is highlighted with the list is opened. If the selection is cleared elsewhere (i.e. from the filter bar), the default text is restored.

Accessibility

Attribute	Applied to	Outcome
`aria-selected="true"`	`.pf-c-select__menu-item`	Should be set programmatically to indicate the active item.
`disabled`	`.pf-c-select__toggle`	Disables the dropdown toggle and removes it from keyboard focus.

Usage

Class	Applied to	Outcome
`.pf-c-select`	`<div>`	Initiates the select component.
`.pf-c-select__toggle`	`<button>`	Initiates the select toggle.
`.pf-c-select__toggle-wrapper`	`<div>`	Initiates the select toggle wrapper.
`.pf-c-select__toggle-arrow`	`<span>`	Initiates the caret to toggle the dropdown.
`.pf-c-select__menu`	`<ul>`	Initiates the select dropdown menu.
`.pf-c-select__menu-item`	`<li>`	Initiates the items in the select dropdown menu.
`.pf-c-select__menu-item-icon`	`<span>`	Initiates the selected item icon wrapper.
`.pf-m-expanded`	`.pf-c-select`	Indicates the select is expanded.
`.pf-m-selected`	`.pf-c-select__menu-item`	Indicates the menu item is selected.
`.pf-m-disabled`	`div.pf-c-select__toggle`	Modifies to display the select toggle as disabled. This applies to `div.pf-c-select__toggle` and should not be used in lieu of the `disabled` attribute on `button.pf-c-select__toggle`. When this is used, `disabled` should also be added to any form elements in `div.pf-c-select__toggle`

Documentation

Accessibility

Attribute	Applied to	Outcome
`aria-selected="true"`	`.pf-c-select__menu-item`	Should be set programmatically to indicate the active item.
`disabled`	`.pf-c-select__toggle`	Disables the dropdown toggle and removes it from keyboard focus.

Usage

Class	Applied to	Outcome
`.pf-c-select`	`<div>`	Initiates the select component.
`.pf-c-select__toggle`	`<button>`	Initiates the select toggle.
`.pf-c-select__toggle-wrapper`	`<div>`	Initiates the select toggle wrapper.
`.pf-c-select__toggle-arrow`	`<span>`	Initiates the caret to toggle the dropdown.
`.pf-c-select__menu`	`<ul>`	Initiates the select dropdown menu.
`.pf-c-select__menu-item`	`<li>`	Initiates the items in the select dropdown menu.
`.pf-c-select__menu-item-icon`	`<i>`	Initiates the selected item icon.
`.pf-m-expanded`	`.pf-c-select`	Indicates the select is expanded.
`.pf-m-selected`	`.pf-c-select__menu-item`	Indicates the menu item is selected.
`.pf-m-disabled`	`div.pf-c-select__toggle`	Modifies to display the select toggle as disabled. This applies to `div.pf-c-select__toggle` and should not be used in lieu of the `disabled` attribute on `button.pf-c-select__toggle`. When this is used, `disabled` should also be added to any form elements in `div.pf-c-select__toggle`

Single with typeahead

Single with typeahead expanded

Single with typeahead expanded and selected

Disabled with typeahead

The single select typeahead should be used when the user is selecting one option from a list of items with the option to narrow the list by typing from the keyboard. Selected items are removed from the list. The user can clear the selection and restore the placeholder text.

Accessibility

Attribute	Applied to	Outcome
`aria-selected="true"`	`.pf-c-select__menu-item`	Should be set programmatically to indicate the active item.

Usage

Class	Applied to	Outcome
`.pf-c-select`	`<div>`	Initiates the select component.
`.pf-c-select__toggle`	`<div>`	Initiates the select toggle.
`.pf-c-select__toggle-wrapper`	`<div>`	Initiates the select toggle wrapper.
`.pf-c-select__toggle-typeahead`	`input.pf-c-form-control`	Initiates the input field for typeahead.
`.pf-c-select__toggle-clear`	`button.pf-c-button.pf-m-plain`	Initiates a clear button in the toggle.
`.pf-c-select__toggle-button`	`button.pf-c-button.pf-m-plain`	Initiates a toggle button.
`.pf-c-select__toggle-arrow`	`<span>`	Initiates the caret icon.
`.pf-c-select__menu`	`<ul>`	Initiates the select dropdown menu.
`.pf-c-select__menu-item`	`<li>`	Initiates the items in the select dropdown menu.
`.pf-m-expanded`	`.pf-c-select`	Indicates the select is expanded.
`.pf-m-typeahead`	`.pf-c-select__toggle`	Indicates the select has a typeahead.

Select multi with typeahead

Multi with typeahead (chip group expanded)

Arkansas
Massachusetts
New Mexico
Ohio
Washington

Multi with typeahead (chip group collapsed)

Arkansas
Massachusetts
New Mexico

The Dropdown Multi Select should be used when the user is selecting multiple items from a list. The user can narrow the list by typing from the keyboard. The List updates while typing. Selected items create a new chip and are removed from the list. The user may clear selections individually or all at once to restore the placeholder.

Accessibility

Attribute	Applied to	Outcome
`aria-selected="true"`	`.pf-c-select__menu-item`	Should be set programmatically to indicate the active item.

Usage

Class	Applied to	Outcome
`.pf-c-select`	`<div>`	Initiates the select component.
`.pf-c-select__toggle`	`<div>`	Initiates the select toggle.
`.pf-c-select__toggle-wrapper`	`<div>`	Initiates the select toggle wrapper so that chips and input field can wrap together.
`.pf-c-chip`	`<div>`	Initiates a chip. (See chip component for more details)
`.pf-c-select__toggle-typeahead`	`input.pf-c-form-control`	Initiates the input field for typeahead.
`.pf-c-select__toggle-clear`	`button.pf-m-plain`	Initiates a clear button in the toggle.
`.pf-c-select__toggle-button`	`<button>`	Initiates a toggle button.
`.pf-c-select__toggle-arrow`	`<span>`	Initiates the caret icon.
`.pf-c-select__menu`	`<ul>`	Initiates the select dropdown menu.
`.pf-c-select__menu-item`	`<li>`	Initiates the items in the select dropdown menu.
`.pf-m-expanded`	`.pf-c-select`	Indicates the select is expanded.
`.pf-m-typeahead`	`.pf-c-select__toggle`	Indicates the select has a typeahead.

Checkbox

Checkbox expanded

Checkbox expanded and selected with groups

Checkbox expanded and selected with groups and filter

Checkbox expanded without badge

The checkbox select can select multiple items using checkboxes. The number of items selected is reflected in an optional badge in the dropdown toggle. The user may clear items by unchecking or using the clear button. Optionally, items may be grouped.

Usage

Class	Applied to	Outcome
`.pf-c-select`	`<div>`	Initiates the select component.
`.pf-c-select__toggle`	`<button>`	Initiates the select toggle.
`.pf-c-select__toggle-wrapper`	`<div>`	Initiates the select toggle wrapper so that chips and input field can wrap together.
`.pf-c-chip`	`<div>`	Initiates a chip. (See chip component for more details)
`.pf-c-select__toggle-typeahead`	`input.pf-c-form-control`	Initiates the input field for typeahead.
`.pf-c-select__toggle-badge`	`<div>`	Initiates a container for a badge to indicate the number of items checked. note: This should contain an unread badge
`.pf-c-select__toggle-clear`	`button.pf-m-plain`	Initiates a clear button in the toggle.
`.pf-c-select__toggle-arrow`	`<span>`	Initiates the caret to toggle the dropdown.
`.pf-c-select__menu`	`<div>`	Initiates the select dropdown menu.
`.pf-c-select__menu-item`	`div.pf-c-check`	Initiates the items in the select dropdown menu.
`.pf-c-select__menu-fieldset`	`<fieldset>`	Initiates a fieldset for the items in a checkbox select.
`.pf-c-select__menu-group`	`<div>`	Initiates a group within a select menu.
`.pf-c-select__menu-group-title`	`<div>`	Initiates a title for a group with a select menu.
`.pf-c-select__menu-search`	`<div>`	Initiates a container for the search input group.
`.pf-m-expanded`	`.pf-c-select`	Indicates the select is expanded.
`.pf-m-typeahead`	`.pf-c-select__toggle`	Indicates the select has a typeahead.

Plain

Plain expanded

The plain select variation should be used when you do not want a border applied to the select toggle.

Usage

Class	Applied to	Outcome
`.pf-c-select`	`<div>`	Initiates the select component.
`.pf-c-select__toggle`	`<button>`	Initiates the select toggle.
`.pf-c-select__toggle-wrapper`	`<div>`	Initiates the select toggle wrapper.
`.pf-c-select__toggle-arrow`	`<span>`	Initiates the caret to toggle the dropdown.
`.pf-c-select__menu`	`<ul>`	Initiates the select dropdown menu.
`.pf-c-select__menu-item`	`<li>`	Initiates the items in the select dropdown menu.
`.pf-c-select__menu-item-icon`	`<i>`	Initiates the selected item icon.
`.pf-m-expanded`	`.pf-c-select`	Indicates the select is expanded.
`.pf-m-plain`	`.pf-c-select__toggle`	Modifies to display the toggle with no border.
`.pf-m-selected`	`.pf-c-select__menu-item`	Indicates the menu item is selected.

Icon

Accessibility

Attribute	Applied to	Outcome
`aria-hidden="true"`	`.pf-c-select__toggle-icon`	Hides the icon from assistive technologies.

Usage

Class	Applied to	Outcome
`.pf-c-select`	`<div>`	Initiates the select component.
`.pf-c-select__toggle`	`<button>`	Initiates the select toggle.
`.pf-c-select__toggle-wrapper`	`<div>`	Initiates the select toggle wrapper.
`.pf-c-select__toggle-icon`	`<span>`	Initiates the icon in the dropdown toggle.
`.pf-c-select__toggle-arrow`	`<span>`	Initiates the caret to toggle the dropdown.

Panel

Usage

Class	Applied to	Outcome
`.pf-c-select`	`<div>`	Initiates the select component.
`.pf-c-select__toggle`	`<button>`	Initiates the select toggle.
`.pf-c-select__toggle-wrapper`	`<div>`	Initiates the select toggle wrapper.
`.pf-c-select__toggle-arrow`	`<span>`	Initiates the caret to toggle the dropdown.
`.pf-c-select__menu`	`<div>`	Initiates the select dropdown menu.

Documentation

Overview

There are 4 variants of the select component: single select, single select with typeahead, multiple select with typeahead, and a multiple checkbox select. See the examples for more details about each variation.

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