Warning alert:Deprecated feature
Examples
Single select
To let users select a single item from a list, use a single select list.
A select list may use other properties for additional customization. Select each checkbox in the example below to visualize the following behavior:
- To prevent a toggle click from opening a select list, use the
isDisabled
property. - To adjust the direction a select menu opens, use the
direction
property. The menu in the following example expands upwards. By default, select lists open upwards. - To add an icon to a select toggle, use the
toggleIcon
property.
With item descriptions
To give more context to a <SelectOption>
in a list, use the description
property.
With grouped items
To group related select options together, use 1 or more <SelectGroup>
components and title each group using the label
property.
Favoriting items
To allow users to favorite items in a select list, use the onFavorite
callback. When users click the favorite button, the item is duplicated and placed in a separated group at the top of the menu. To change the name of the group use the favoritesLabel
property.
Validated selections
To validate selections that users make, pass a validation state to the validated
property. Validating selections can let users know if the selections they make would cause issues or errors.
The example below passes an "error" state when you choose “select a title”, a "warning" state when you choose "other", and a "success" state for any other item selected from the menu.
Styled placeholder text
To add a toggle label to a select, use the placeholderText
property. The following example displays "Filter by status" in the toggle before a selection is made.
To fade the color of placeholderText
to gray, use the hasPlaceholderStyle
property.
Placeholder select options
To set a <SelectOption>
as a placeholder, use the isPlaceholder
property. The following example sets the "Filter by status" as a placeholder so that it is pre-selected.
With a footer
You can add a footer
to a <Select>
list to hold actions that users can take on menu items.
With view more
To reduce the processing load for long select lists, replace overflow items with a "View more" link at the bottom of the select menu.
Adjust the number of items shown above the "View more" link with the numOptions
property. The following example passes 3 items into this property.
Checkbox select
To let users select multiple list options via checkbox input, use a checkbox select. To create a checkbox select, pass variant={SelectVariant.checkbox}
into the <Select>
component.
By default, a badge is displayed in the menu toggle that indicates the number of items a user has selected.
Checkbox select with grouped items
You can use groups alongside checkbox input. The item count badge will display the number of items selected across all groups.
Checkbox select with custom badge
To change the default badge text for a checkbox select, use the customBadgeText
property. The following example uses customBadgeText
to display "all" in the badge once all menu items are selected.
Checkbox select without selected count
To remove the default item count badge, use the isCheckboxSelectionBadgeHidden
property.
Checkbox select with item counts
To show users the number of items that a <SelectOption>
would match, use the itemCount
property. The numerical value you pass into itemCount
is displayed to the right of each menu item.
Checkbox select with a footer
You can combine a footer with checkbox input to allow users to apply an action to multiple items.
Checkbox select with view more
When a "view more" link is used alongside checkbox input, selections that users make prior to clicking "view more" are persisted after the click.
Filtering with placeholder text
To preload a filter search bar with placeholder text, use the inlineFilterPlaceholderText
property. The following example preloads the search bar with "Filter by status".
Inline filtering
To allow users to filter select lists using text input, use the hasInlineFilter
property. Filtering behavior can be further customized with other properties, as shown in the example below. Select each checkbox to visualize the following behavior:
- To persist filter results on blur, use the
isInputValuePersisted
property. - To persist a filter that a user has searched, use the
isInputFilterPersisted
property. - To allow users to add new items to a select list, use the
isCreatable
property. When this property is applied and a user searches for an option that doesn't exist, they will be prompted to "create" the item.
Typeahead
Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user types in the text input, the select menu will provide suggestions by filtering the select options.
To make a typeahead, pass variant=typeahead
into the <Select>
component. To specify a label for the input field, use the typeAheadAriaLabel
property.
A few additional customization options are shown in the example below. Select each checkbox to visualize the following behavior:
- To place a created item at the top of a typeahead list use the
isCreateOptionOnTop
property. - To trigger a callback for newly created items, use the
onCreateOption
property. - To reset the typeahead value after a user makes a selection, use the
shouldResetOnSelect
property.
Typeahead with custom filtering
You can add custom filtering to a select list to better fit needs that aren't covered by inline filtering. If you use custom filtering, use the onFilter
property to trigger a callback with your custom filter implementation.
Multiple typeahead
To create a multiple typeahead select variant, pass variant={SelectVariant.typeaheadMulti}
into the <Select>
component. Multiple typeaheads let users select multiple items from a select list. Selected items appear as chips in the select toggle.
When many items are selected, you can hide overflowing items under a "more" button. The following example hides items after more than 3 are selected. To show hidden items, select the “more” button. Click "show less" to hide extra items again.
Multiple typeahead with custom chips
To customize the appearance of chips, use the chipGroupProps
property. The numChips
property allows you to control the number of items shown, while the expandedText
and collapsedText
properties allow you to control the labels of the expansion and collapse chips.
Multiple typeahead with chip group
To customize chips even more, render a <ChipGroup>
component and pass it into the chipGroupComponent
property of the <Select>
component.
Multiple typeahead with custom objects
A <SelectOption>
can have an object passed into the value
property in order to store additional data beyond just a string value. The object passed in must have a toString
function that returns a string to display in the SelectMenu
.
Appending document body vs parent
Avoid passing in document.body
to the menuAppendTo
property. Doing so can cause accessibility issues because this prevents users from being able to enter the contents of the select options via assistive technologies (like keyboards or screen readers). Instead, pass in parent
to achieve the same result without sacrificing accessibility.
The following example demonstrates both methods. When the dropdown is opened, both select variants manage focus the same way, but behave differently when the tab key is pressed after an option is selected.
- 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).
Props
Select
Name | Type | Default | Description |
---|---|---|---|
onTogglerequired | (event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event, isExpanded: boolean) => 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 |
isCreateOptionOnTop | boolean | false | Flag to indicate if create option should be at top of typeahead |
isCreateSelectOptionObject | 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 | true | 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 |
isInputFilterPersisted | 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 |
loadingVariant | '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. |
ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
ouiaSafe | boolean | true | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. |
placeholderText | 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 |
toggleIndicator | React.ReactElement | null | Custom icon for the dropdown replacing the CaretDownIcon |
toggleRef | React.Ref<HTMLButtonElement> | React.Ref<HTMLDivElement> | Ref for the 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 |
zIndex | number | 9999 | z-index of the select menu when menuAppendTo is not inline. |
SelectOption
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
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
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
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
Expand or collapse column | Selector | Variable | Value | |
---|---|---|---|---|
.pf-v5-c-select | --pf-v5-global--Color--100 | #151515 | ||
--pf-v5-global--Color--100 --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-select | --pf-v5-global--Color--200 | #6a6e73 | ||
--pf-v5-global--Color--200 --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
.pf-v5-c-select | --pf-v5-global--BorderColor--100 | #d2d2d2 | ||
--pf-v5-global--BorderColor--100 --pf-v5-global--BorderColor--dark-100 $pf-v5-global--BorderColor--dark-100 $pf-v5-color-black-300 #d2d2d2 | ||||
.pf-v5-c-select | --pf-v5-global--primary-color--100 | #06c | ||
--pf-v5-global--primary-color--100 --pf-v5-global--primary-color--dark-100 $pf-v5-global--primary-color--dark-100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-select | --pf-v5-global--link--Color | #06c | ||
--pf-v5-global--link--Color --pf-v5-global--link--Color--dark $pf-v5-global--link--Color--dark $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-select | --pf-v5-global--link--Color--hover | #004080 | ||
--pf-v5-global--link--Color--hover --pf-v5-global--link--Color--dark--hover $pf-v5-global--link--Color--dark--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
.pf-v5-c-select | --pf-v5-global--BackgroundColor--100 | #fff | ||
--pf-v5-global--BackgroundColor--100 --pf-v5-global--BackgroundColor--light-100 $pf-v5-global--BackgroundColor--light-100 $pf-v5-color-white #fff | ||||
.pf-v5-c-select | --pf-v5-global--icon--Color--light | #6a6e73 | ||
--pf-v5-global--icon--Color--light --pf-v5-global--icon--Color--light--dark $pf-v5-global--icon--Color--light--dark $pf-v5-color-black-600 #6a6e73 | ||||
.pf-v5-c-select | --pf-v5-global--icon--Color--dark | #151515 | ||
--pf-v5-global--icon--Color--dark --pf-v5-global--icon--Color--dark--dark $pf-v5-global--icon--Color--dark--dark $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--PaddingTop | 0.375rem | ||
--pf-v5-c-select__toggle--PaddingTop --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--PaddingRight | 0.5rem | ||
--pf-v5-c-select__toggle--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--PaddingBottom | 0.375rem | ||
--pf-v5-c-select__toggle--PaddingBottom --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--PaddingLeft | 0.5rem | ||
--pf-v5-c-select__toggle--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--MinWidth | 44px | ||
--pf-v5-c-select__toggle--MinWidth --pf-v5-global--target-size--MinWidth $pf-v5-global--target-size--MinWidth 44px | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--FontSize | 1rem | ||
--pf-v5-c-select__toggle--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--FontWeight | 400 | ||
--pf-v5-c-select__toggle--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--LineHeight | 1.5 | ||
--pf-v5-c-select__toggle--LineHeight --pf-v5-global--LineHeight--md $pf-v5-global--LineHeight--md 1.5 | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--BackgroundColor | #fff | ||
--pf-v5-c-select__toggle--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--before--BorderTopWidth | 1px | ||
--pf-v5-c-select__toggle--before--BorderTopWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--before--BorderRightWidth | 1px | ||
--pf-v5-c-select__toggle--before--BorderRightWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--before--BorderBottomWidth | 1px | ||
--pf-v5-c-select__toggle--before--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--before--BorderLeftWidth | 1px | ||
--pf-v5-c-select__toggle--before--BorderLeftWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--before--BorderWidth | initial | ||
.pf-v5-c-select | --pf-v5-c-select__toggle--before--BorderTopColor | #f0f0f0 | ||
--pf-v5-c-select__toggle--before--BorderTopColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--before--BorderRightColor | #f0f0f0 | ||
--pf-v5-c-select__toggle--before--BorderRightColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--before--BorderBottomColor | #8a8d90 | ||
--pf-v5-c-select__toggle--before--BorderBottomColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--before--BorderLeftColor | #f0f0f0 | ||
--pf-v5-c-select__toggle--before--BorderLeftColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--Color | #151515 | ||
--pf-v5-c-select__toggle--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--hover--before--BorderBottomColor | #06c | ||
--pf-v5-c-select__toggle--hover--before--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--focus--before--BorderBottomColor | #06c | ||
--pf-v5-c-select__toggle--focus--before--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--focus--before--BorderBottomWidth | 2px | ||
--pf-v5-c-select__toggle--focus--before--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--active--before--BorderBottomColor | #06c | ||
--pf-v5-c-select__toggle--active--before--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--active--before--BorderBottomWidth | 2px | ||
--pf-v5-c-select__toggle--active--before--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--m-expanded--before--BorderBottomColor | #06c | ||
--pf-v5-c-select__toggle--m-expanded--before--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--m-expanded--before--BorderBottomWidth | 2px | ||
--pf-v5-c-select__toggle--m-expanded--before--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--disabled--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-select__toggle--disabled--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0 | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle--m-plain--before--BorderColor | transparent | ||
.pf-v5-c-select | --pf-v5-c-select__toggle--m-placeholder--Color | transparent | ||
.pf-v5-c-select | --pf-v5-c-select--m-invalid__toggle--before--BorderBottomColor | #c9190b | ||
--pf-v5-c-select--m-invalid__toggle--before--BorderBottomColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
.pf-v5-c-select | --pf-v5-c-select--m-invalid__toggle--before--BorderBottomWidth | 2px | ||
--pf-v5-c-select--m-invalid__toggle--before--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
.pf-v5-c-select | --pf-v5-c-select--m-invalid__toggle--hover--before--BorderBottomColor | #c9190b | ||
--pf-v5-c-select--m-invalid__toggle--hover--before--BorderBottomColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
.pf-v5-c-select | --pf-v5-c-select--m-invalid__toggle--focus--before--BorderBottomColor | #c9190b | ||
--pf-v5-c-select--m-invalid__toggle--focus--before--BorderBottomColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
.pf-v5-c-select | --pf-v5-c-select--m-invalid__toggle--active--before--BorderBottomColor | #c9190b | ||
--pf-v5-c-select--m-invalid__toggle--active--before--BorderBottomColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
.pf-v5-c-select | --pf-v5-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor | #c9190b | ||
--pf-v5-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
.pf-v5-c-select | --pf-v5-c-select--m-invalid__toggle-status-icon--Color | #c9190b | ||
--pf-v5-c-select--m-invalid__toggle-status-icon--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
.pf-v5-c-select | --pf-v5-c-select--m-success__toggle--before--BorderBottomColor | #3e8635 | ||
--pf-v5-c-select--m-success__toggle--before--BorderBottomColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
.pf-v5-c-select | --pf-v5-c-select--m-success__toggle--before--BorderBottomWidth | 2px | ||
--pf-v5-c-select--m-success__toggle--before--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
.pf-v5-c-select | --pf-v5-c-select--m-success__toggle--hover--before--BorderBottomColor | #3e8635 | ||
--pf-v5-c-select--m-success__toggle--hover--before--BorderBottomColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
.pf-v5-c-select | --pf-v5-c-select--m-success__toggle--focus--before--BorderBottomColor | #3e8635 | ||
--pf-v5-c-select--m-success__toggle--focus--before--BorderBottomColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
.pf-v5-c-select | --pf-v5-c-select--m-success__toggle--active--before--BorderBottomColor | #3e8635 | ||
--pf-v5-c-select--m-success__toggle--active--before--BorderBottomColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
.pf-v5-c-select | --pf-v5-c-select--m-success__toggle--m-expanded--before--BorderBottomColor | #3e8635 | ||
--pf-v5-c-select--m-success__toggle--m-expanded--before--BorderBottomColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
.pf-v5-c-select | --pf-v5-c-select--m-success__toggle-status-icon--Color | #3e8635 | ||
--pf-v5-c-select--m-success__toggle-status-icon--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
.pf-v5-c-select | --pf-v5-c-select--m-warning__toggle--before--BorderBottomColor | #f0ab00 | ||
--pf-v5-c-select--m-warning__toggle--before--BorderBottomColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
.pf-v5-c-select | --pf-v5-c-select--m-warning__toggle--before--BorderBottomWidth | 2px | ||
--pf-v5-c-select--m-warning__toggle--before--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
.pf-v5-c-select | --pf-v5-c-select--m-warning__toggle--hover--before--BorderBottomColor | #f0ab00 | ||
--pf-v5-c-select--m-warning__toggle--hover--before--BorderBottomColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
.pf-v5-c-select | --pf-v5-c-select--m-warning__toggle--focus--before--BorderBottomColor | #f0ab00 | ||
--pf-v5-c-select--m-warning__toggle--focus--before--BorderBottomColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
.pf-v5-c-select | --pf-v5-c-select--m-warning__toggle--active--before--BorderBottomColor | #f0ab00 | ||
--pf-v5-c-select--m-warning__toggle--active--before--BorderBottomColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
.pf-v5-c-select | --pf-v5-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor | #f0ab00 | ||
--pf-v5-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
.pf-v5-c-select | --pf-v5-c-select--m-warning__toggle-status-icon--Color | #f0ab00 | ||
--pf-v5-c-select--m-warning__toggle-status-icon--Color --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle-wrapper--not-last-child--MarginRight | 0.25rem | ||
--pf-v5-c-select__toggle-wrapper--not-last-child--MarginRight --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle-wrapper--MaxWidth | calc(100% - 1.5rem) | ||
--pf-v5-c-select__toggle-wrapper--MaxWidth calc(100% - --pf-v5-global--spacer--lg) calc(100% - $pf-v5-global--spacer--lg) calc(100% - pf-size-prem(24px)) calc(100% - 1.5rem) | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle-wrapper--c-chip-group--MarginTop | 0.3125rem | ||
.pf-v5-c-select | --pf-v5-c-select__toggle-wrapper--c-chip-group--MarginBottom | 0.3125rem | ||
.pf-v5-c-select | --pf-v5-c-select__toggle-typeahead--FlexBasis | 10em | ||
.pf-v5-c-select | --pf-v5-c-select__toggle-typeahead--BackgroundColor | transparent | ||
.pf-v5-c-select | --pf-v5-c-select__toggle-typeahead--BorderTop | 1px solid transparent | ||
--pf-v5-c-select__toggle-typeahead--BorderTop --pf-v5-global--BorderWidth--sm solid transparent $pf-v5-global--BorderWidth--sm solid transparent 1px solid transparent | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle-typeahead--BorderRight | none | ||
.pf-v5-c-select | --pf-v5-c-select__toggle-typeahead--BorderLeft | none | ||
.pf-v5-c-select | --pf-v5-c-select__toggle-typeahead--MinWidth | 7.5rem | ||
.pf-v5-c-select | --pf-v5-c-select__toggle--m-placeholder__toggle-text--Color | #6a6e73 | ||
--pf-v5-c-select__toggle--m-placeholder__toggle-text--Color --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle-icon--toggle-text--MarginLeft | 0.25rem | ||
--pf-v5-c-select__toggle-icon--toggle-text--MarginLeft --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle-badge--PaddingLeft | 0.5rem | ||
--pf-v5-c-select__toggle-badge--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle-status-icon--MarginLeft | 0.25rem | ||
--pf-v5-c-select__toggle-status-icon--MarginLeft --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle-status-icon--Color | #151515 | ||
--pf-v5-c-select__toggle-status-icon--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle-arrow--MarginLeft | 1rem | ||
--pf-v5-c-select__toggle-arrow--MarginLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle-arrow--MarginRight | 0.5rem | ||
--pf-v5-c-select__toggle-arrow--MarginRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle-arrow--with-clear--MarginLeft | 0.5rem | ||
--pf-v5-c-select__toggle-arrow--with-clear--MarginLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate | 180deg | ||
.pf-v5-c-select | --pf-v5-c-select--m-plain__toggle-arrow--Color | #6a6e73 | ||
--pf-v5-c-select--m-plain__toggle-arrow--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
.pf-v5-c-select | --pf-v5-c-select--m-plain--hover__toggle-arrow--Color | #151515 | ||
--pf-v5-c-select--m-plain--hover__toggle-arrow--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle-clear--PaddingRight | 0.5rem | ||
--pf-v5-c-select__toggle-clear--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle-clear--PaddingLeft | 1rem | ||
--pf-v5-c-select__toggle-clear--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle-clear--toggle-button--PaddingLeft | 0.5rem | ||
--pf-v5-c-select__toggle-clear--toggle-button--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-select | --pf-v5-c-select__toggle-button--Color | #151515 | ||
--pf-v5-c-select__toggle-button--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-select | --pf-v5-c-select__menu--BackgroundColor | #fff | ||
--pf-v5-c-select__menu--BackgroundColor --pf-v5-global--BackgroundColor--light-100 $pf-v5-global--BackgroundColor--light-100 $pf-v5-color-white #fff | ||||
.pf-v5-c-select | --pf-v5-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-v5-c-select__menu--BoxShadow --pf-v5-global--BoxShadow--md $pf-v5-global--BoxShadow--md 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-v5-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-v5-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-v5-c-select | --pf-v5-c-select__menu--PaddingTop | 0.5rem | ||
--pf-v5-c-select__menu--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-select | --pf-v5-c-select__menu--PaddingBottom | 0.5rem | ||
--pf-v5-c-select__menu--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-select | --pf-v5-c-select__menu--Top | calc(100% + 0.25rem) | ||
--pf-v5-c-select__menu--Top calc(100% + --pf-v5-global--spacer--xs) calc(100% + $pf-v5-global--spacer--xs) calc(100% + pf-size-prem(4px)) calc(100% + 0.25rem) | ||||
.pf-v5-c-select | --pf-v5-c-select__menu--ZIndex | 200 | ||
--pf-v5-c-select__menu--ZIndex --pf-v5-global--ZIndex--sm $pf-v5-global--ZIndex--sm 200 | ||||
.pf-v5-c-select | --pf-v5-c-select__menu--Width | auto | ||
.pf-v5-c-select | --pf-v5-c-select__menu--MinWidth | 100% | ||
.pf-v5-c-select | --pf-v5-c-select__menu--m-top--TranslateY | calc(-100% - 0.25rem) | ||
--pf-v5-c-select__menu--m-top--TranslateY calc(-100% - --pf-v5-global--spacer--xs) calc(-100% - $pf-v5-global--spacer--xs) calc(-100% - pf-size-prem(4px)) calc(-100% - 0.25rem) | ||||
.pf-v5-c-select | --pf-v5-c-select__list-item--m-loading--PaddingTop | 0.5rem | ||
--pf-v5-c-select__list-item--m-loading--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-item--PaddingTop | 0.5rem | ||
--pf-v5-c-select__menu-item--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-item--PaddingRight | 1rem | ||
--pf-v5-c-select__menu-item--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-item--m-selected--PaddingRight | 3rem | ||
--pf-v5-c-select__menu-item--m-selected--PaddingRight --pf-v5-global--spacer--2xl $pf-v5-global--spacer--2xl pf-size-prem(48px) 3rem | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-item--PaddingBottom | 0.5rem | ||
--pf-v5-c-select__menu-item--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-item--PaddingLeft | 1rem | ||
--pf-v5-c-select__menu-item--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-item--FontSize | 1rem | ||
--pf-v5-c-select__menu-item--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-item--FontWeight | 400 | ||
--pf-v5-c-select__menu-item--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-item--LineHeight | 1.5 | ||
--pf-v5-c-select__menu-item--LineHeight --pf-v5-global--LineHeight--md $pf-v5-global--LineHeight--md 1.5 | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-item--Color | #151515 | ||
--pf-v5-c-select__menu-item--Color --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-item--disabled--Color | #6a6e73 | ||
--pf-v5-c-select__menu-item--disabled--Color --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-item--Width | 100% | ||
.pf-v5-c-select | --pf-v5-c-select__menu-item--hover--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-select__menu-item--hover--BackgroundColor --pf-v5-global--BackgroundColor--light-300 $pf-v5-global--BackgroundColor--light-300 $pf-v5-color-black-200 #f0f0f0 | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-item--focus--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-select__menu-item--focus--BackgroundColor --pf-v5-global--BackgroundColor--light-300 $pf-v5-global--BackgroundColor--light-300 $pf-v5-color-black-200 #f0f0f0 | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-item--disabled--BackgroundColor | transparent | ||
.pf-v5-c-select | --pf-v5-c-select__menu-item--m-link--Width | auto | ||
.pf-v5-c-select | --pf-v5-c-select__menu-item--m-link--hover--BackgroundColor | transparent | ||
.pf-v5-c-select | --pf-v5-c-select__menu-item--m-link--focus--BackgroundColor | transparent | ||
.pf-v5-c-select | --pf-v5-c-select__menu-item--m-action--Color | #6a6e73 | ||
--pf-v5-c-select__menu-item--m-action--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-item--m-action--hover--Color | #151515 | ||
--pf-v5-c-select__menu-item--m-action--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-item--m-action--focus--Color | #151515 | ||
--pf-v5-c-select__menu-item--m-action--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-item--m-action--disabled--Color | #d2d2d2 | ||
--pf-v5-c-select__menu-item--m-action--disabled--Color --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-item--m-action--Width | auto | ||
.pf-v5-c-select | --pf-v5-c-select__menu-item--m-action--FontSize | 0.75rem | ||
--pf-v5-c-select__menu-item--m-action--FontSize --pf-v5-global--icon--FontSize--sm $pf-v5-global--icon--FontSize--sm pf-font-prem(12px) 0.75rem | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-item--m-action--hover--BackgroundColor | transparent | ||
.pf-v5-c-select | --pf-v5-c-select__menu-item--m-action--focus--BackgroundColor | transparent | ||
.pf-v5-c-select | --pf-v5-c-select__menu-item--hover__menu-item--m-action--Color | #6a6e73 | ||
--pf-v5-c-select__menu-item--hover__menu-item--m-action--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-item--m-favorite-action--Color | #6a6e73 | ||
--pf-v5-c-select__menu-item--m-favorite-action--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-item--m-favorite-action--hover--Color | #151515 | ||
--pf-v5-c-select__menu-item--m-favorite-action--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-item--m-favorite-action--focus--Color | #151515 | ||
--pf-v5-c-select__menu-item--m-favorite-action--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color | #f0ab00 | ||
--pf-v5-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color --pf-v5-global--palette--gold-400 $pf-v5-color-gold-400 #f0ab00 | ||||
.pf-v5-c-select | --pf-v5-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color | #c58c00 | ||
--pf-v5-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color --pf-v5-global--palette--gold-500 $pf-v5-color-gold-500 #c58c00 | ||||