Examples
Props
Select
| Name | Type | Default | Description |
|---|---|---|---|
| onTogglerequired | (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 |
| inlineFilterPlaceholderText | string | null | Placeholder text for inline filter |
| 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 |
| isDisabled | boolean | false | Flag to indicate if select is disabled |
| isGrouped | boolean | false | Flag to indicate if select options are grouped |
| isInputValuePersistedBeta | boolean | false | Flag for retaining keyboard-entered value in typeahead text field when focus leaves input away |
| isOpen | boolean | false | Flag to indicate if select is open |
| isPlain | boolean | false | Display the toggle with no border or background |
| loadingVariantBeta | 'spinner' | SelectViewMoreObject | Loading variant to display either the spinner or the view more text button | |
| maxHeight | string | number | Max height of the select container as a number of px or string percentage | |
| menuAppendTo | No type info | 'inline' | |
| noResultsFoundText | string | 'No results found' | Text to display in typeahead select when no results are found |
| onClear | (event: React.MouseEvent) => void | () => undefined as void | Callback for typeahead clear button |
| onCreateOption | (newOptionValue: string) => void | () => undefined as void | Optional callback for newly created options |
| onFavorite | (itemId: string, isFavorite: boolean) => void | Enables favorites. Callback called when a select options's favorite button is clicked | |
| onFilter | (e: React.ChangeEvent<HTMLInputElement> | null, value: string) => React.ReactElement[] | undefined | null | Optional callback for custom filtering |
| onSelect | ( event: React.MouseEvent | React.ChangeEvent, value: string | SelectOptionObject, isPlaceholder?: boolean ) => void | Callback for selection behavior | |
| onTypeaheadInputChanged | (value: string) => void | null | Optional event handler called each time the value in the typeahead input changes. |
| ouiaSafe | No type info | true | |
| placeholderText | string | React.ReactNode | '' | Title text of Select |
| 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. |
| 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 |
| typeAheadAriaLabel | string | '' | Label for input field of type ahead select variants |
| validated | 'success' | 'warning' | 'error' | 'default' | 'default' | Value to indicate if the select is modified to show that validation state. If set to success, select will be modified to indicate valid state. If set to error, select will be modified to indicate error state. If set to warning, select will be modified to indicate warning state. |
| variant | 'single' | 'checkbox' | 'typeahead' | 'typeaheadmulti' | SelectVariant.single | Variant of rendered Select |
| width | string | number | '' | Width of the select container as a number of px or string percentage |
SelectOption
| 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
| .pf-c-select | --pf-global--Color--100 | #151515 | |
| .pf-c-select | --pf-global--Color--200 | #6a6e73 | |
| .pf-c-select | --pf-global--BorderColor--100 | #d2d2d2 | |
| .pf-c-select | --pf-global--primary-color--100 | #06c | |
| .pf-c-select | --pf-global--link--Color | #06c | |
| .pf-c-select | --pf-global--link--Color--hover | #004080 | |
| .pf-c-select | --pf-global--BackgroundColor--100 | #fff | |
| .pf-c-select | --pf-c-select__toggle--PaddingTop | 0.375rem | |
| .pf-c-select | --pf-c-select__toggle--PaddingRight | 0.5rem | |
| .pf-c-select | --pf-c-select__toggle--PaddingBottom | 0.375rem | |
| .pf-c-select | --pf-c-select__toggle--PaddingLeft | 0.5rem | |
| .pf-c-select | --pf-c-select__toggle--MinWidth | 44px | |
| .pf-c-select | --pf-c-select__toggle--FontSize | 1rem | |
| .pf-c-select | --pf-c-select__toggle--FontWeight | 400 | |
| .pf-c-select | --pf-c-select__toggle--LineHeight | 1.5 | |
| .pf-c-select | --pf-c-select__toggle--BackgroundColor | #fff | |
| .pf-c-select | --pf-c-select__toggle--before--BorderTopWidth | 1px | |
| .pf-c-select | --pf-c-select__toggle--before--BorderRightWidth | 1px | |
| .pf-c-select | --pf-c-select__toggle--before--BorderBottomWidth | 1px | |
| .pf-c-select | --pf-c-select__toggle--before--BorderLeftWidth | 1px | |
| .pf-c-select | --pf-c-select__toggle--before--BorderWidth | 1px 1px 1px 1px | |
| .pf-c-select | --pf-c-select__toggle--before--BorderTopColor | #f0f0f0 | |
| .pf-c-select | --pf-c-select__toggle--before--BorderRightColor | #f0f0f0 | |
| .pf-c-select | --pf-c-select__toggle--before--BorderBottomColor | #8a8d90 | |
| .pf-c-select | --pf-c-select__toggle--before--BorderLeftColor | #f0f0f0 | |
| .pf-c-select | --pf-c-select__toggle--Color | #151515 | |
| .pf-c-select | --pf-c-select__toggle--hover--before--BorderBottomColor | #06c | |
| .pf-c-select | --pf-c-select__toggle--focus--before--BorderBottomColor | #06c | |
| .pf-c-select | --pf-c-select__toggle--focus--before--BorderBottomWidth | 2px | |
| .pf-c-select | --pf-c-select__toggle--active--before--BorderBottomColor | #06c | |
| .pf-c-select | --pf-c-select__toggle--active--before--BorderBottomWidth | 2px | |
| .pf-c-select | --pf-c-select__toggle--m-expanded--before--BorderBottomColor | #06c | |
| .pf-c-select | --pf-c-select__toggle--m-expanded--before--BorderBottomWidth | 2px | |
| .pf-c-select | --pf-c-select__toggle--disabled--BackgroundColor | #f0f0f0 | |
| .pf-c-select | --pf-c-select__toggle--m-plain--before--BorderColor | transparent | |
| .pf-c-select | --pf-c-select--m-invalid__toggle--before--BorderBottomColor | #c9190b | |
| .pf-c-select | --pf-c-select--m-invalid__toggle--before--BorderBottomWidth | 2px | |
| .pf-c-select | --pf-c-select--m-invalid__toggle--hover--before--BorderBottomColor | #c9190b | |
| .pf-c-select | --pf-c-select--m-invalid__toggle--focus--before--BorderBottomColor | #c9190b | |
| .pf-c-select | --pf-c-select--m-invalid__toggle--active--before--BorderBottomColor | #c9190b | |
| .pf-c-select | --pf-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor | #c9190b | |
| .pf-c-select | --pf-c-select--m-invalid__toggle-status-icon--Color | #c9190b | |
| .pf-c-select | --pf-c-select--m-success__toggle--before--BorderBottomColor | #3e8635 | |
| .pf-c-select | --pf-c-select--m-success__toggle--before--BorderBottomWidth | 2px | |
| .pf-c-select | --pf-c-select--m-success__toggle--hover--before--BorderBottomColor | #3e8635 | |
| .pf-c-select | --pf-c-select--m-success__toggle--focus--before--BorderBottomColor | #3e8635 | |
| .pf-c-select | --pf-c-select--m-success__toggle--active--before--BorderBottomColor | #3e8635 | |
| .pf-c-select | --pf-c-select--m-success__toggle--m-expanded--before--BorderBottomColor | #3e8635 | |
| .pf-c-select | --pf-c-select--m-success__toggle-status-icon--Color | #3e8635 | |
| .pf-c-select | --pf-c-select--m-warning__toggle--before--BorderBottomColor | #f0ab00 | |
| .pf-c-select | --pf-c-select--m-warning__toggle--before--BorderBottomWidth | 2px | |
| .pf-c-select | --pf-c-select--m-warning__toggle--hover--before--BorderBottomColor | #f0ab00 | |
| .pf-c-select | --pf-c-select--m-warning__toggle--focus--before--BorderBottomColor | #f0ab00 | |
| .pf-c-select | --pf-c-select--m-warning__toggle--active--before--BorderBottomColor | #f0ab00 | |
| .pf-c-select | --pf-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor | #f0ab00 | |
| .pf-c-select | --pf-c-select--m-warning__toggle-status-icon--Color | #f0ab00 | |
| .pf-c-select | --pf-c-select__toggle-wrapper--not-last-child--MarginRight | 0.25rem | |
| .pf-c-select | --pf-c-select__toggle-wrapper--MaxWidth | calc(100% - 1.5rem) | |
| .pf-c-select | --pf-c-select__toggle-wrapper--c-chip-group--MarginTop | 0.3125rem | |
| .pf-c-select | --pf-c-select__toggle-wrapper--c-chip-group--MarginBottom | 0.3125rem | |
| .pf-c-select | --pf-c-select__toggle-typeahead--FlexBasis | 10em | |
| .pf-c-select | --pf-c-select__toggle-typeahead--BackgroundColor | transparent | |
| .pf-c-select | --pf-c-select__toggle-typeahead--BorderTop | 1px solid transparent | |
| .pf-c-select | --pf-c-select__toggle-typeahead--BorderRight | none | |
| .pf-c-select | --pf-c-select__toggle-typeahead--BorderLeft | none | |
| .pf-c-select | --pf-c-select__toggle-typeahead--MinWidth | 7.5rem | |
| .pf-c-select | --pf-c-select__toggle-typeahead--focus--PaddingBottom | calc(0.375rem - 2px) | |
| .pf-c-select | --pf-c-select__toggle-icon--toggle-text--MarginLeft | 0.25rem | |
| .pf-c-select | --pf-c-select__toggle-badge--PaddingLeft | 0.5rem | |
| .pf-c-select | --pf-c-select__toggle-status-icon--MarginLeft | 0.25rem | |
| .pf-c-select | --pf-c-select__toggle-status-icon--Color | #151515 | |
| .pf-c-select | --pf-c-select__toggle-arrow--MarginLeft | 1rem | |
| .pf-c-select | --pf-c-select__toggle-arrow--MarginRight | 0.5rem | |
| .pf-c-select | --pf-c-select__toggle-arrow--with-clear--MarginLeft | 0.5rem | |
| .pf-c-select | --pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate | 180deg | |
| .pf-c-select | --pf-c-select__toggle-clear--PaddingRight | 0.5rem | |
| .pf-c-select | --pf-c-select__toggle-clear--PaddingLeft | 1rem | |
| .pf-c-select | --pf-c-select__toggle-clear--toggle-button--PaddingLeft | 0.5rem | |
| .pf-c-select | --pf-c-select__toggle-button--Color | #151515 | |
| .pf-c-select | --pf-c-select__menu--BackgroundColor | #fff | |
| .pf-c-select | --pf-c-select__menu--BoxShadow | 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | |
| .pf-c-select | --pf-c-select__menu--PaddingTop | 0.5rem | |
| .pf-c-select | --pf-c-select__menu--PaddingBottom | 0.5rem | |
| .pf-c-select | --pf-c-select__menu--Top | calc(100% + 0.25rem) | |
| .pf-c-select | --pf-c-select__menu--ZIndex | 200 | |
| .pf-c-select | --pf-c-select__menu--m-top--TranslateY | calc(-100% - 0.25rem) | |
| .pf-c-select | --pf-c-select__list-item--m-loading--PaddingTop | 0.5rem | |
| .pf-c-select | --pf-c-select__menu-item--PaddingTop | 0.5rem | |
| .pf-c-select | --pf-c-select__menu-item--PaddingRight | 1rem | |
| .pf-c-select | --pf-c-select__menu-item--m-selected--PaddingRight | 3rem | |
| .pf-c-select | --pf-c-select__menu-item--PaddingBottom | 0.5rem | |
| .pf-c-select | --pf-c-select__menu-item--PaddingLeft | 1rem | |
| .pf-c-select | --pf-c-select__menu-item--FontSize | 1rem | |
| .pf-c-select | --pf-c-select__menu-item--FontWeight | 400 | |
| .pf-c-select | --pf-c-select__menu-item--LineHeight | 1.5 | |
| .pf-c-select | --pf-c-select__menu-item--Color | #151515 | |
| .pf-c-select | --pf-c-select__menu-item--Width | 100% | |
| .pf-c-select | --pf-c-select__menu-item--disabled--Color | #6a6e73 | |
| .pf-c-select | --pf-c-select__menu-item--hover--BackgroundColor | #f0f0f0 | |
| .pf-c-select | --pf-c-select__menu-item--focus--BackgroundColor | #f0f0f0 | |
| .pf-c-select | --pf-c-select__menu-item--disabled--BackgroundColor | transparent | |
| .pf-c-select | --pf-c-select__menu-item--m-link--Width | auto | |
| .pf-c-select | --pf-c-select__menu-item--m-link--hover--BackgroundColor | transparent | |
| .pf-c-select | --pf-c-select__menu-item--m-link--focus--BackgroundColor | transparent | |
| .pf-c-select | --pf-c-select__menu-item--m-action--Color | #d2d2d2 | |
| .pf-c-select | --pf-c-select__menu-item--m-action--Width | auto | |
| .pf-c-select | --pf-c-select__menu-item--m-action--FontSize | 0.625rem | |
| .pf-c-select | --pf-c-select__menu-item--m-action--hover--BackgroundColor | transparent | |
| .pf-c-select | --pf-c-select__menu-item--m-action--focus--BackgroundColor | transparent | |
| .pf-c-select | --pf-c-select__menu-item--hover__menu-item--m-action--Color | #6a6e73 | |
| .pf-c-select | --pf-c-select__menu-item--m-action--hover--Color | #151515 | |
| .pf-c-select | --pf-c-select__menu-item--m-action--focus--Color | #151515 | |
| .pf-c-select | --pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color | #f0ab00 | |
| .pf-c-select | --pf-c-select__menu-item--m-load--Color | #06c | |
| .pf-c-select | --pf-c-select__menu-item-icon--Color | #06c | |
| .pf-c-select | --pf-c-select__menu-item-icon--FontSize | 0.625rem | |
| .pf-c-select | --pf-c-select__menu-item-icon--Right | 1rem | |
| .pf-c-select | --pf-c-select__menu-item-icon--Top | 50% | |
| .pf-c-select | --pf-c-select__menu-item-icon--TranslateY | -50% | |
| .pf-c-select | --pf-c-select__menu-item-action-icon--MinHeight | calc(1rem * 1.5) | |
| .pf-c-select | --pf-c-select__menu-item--match--FontWeight | 700 | |
| .pf-c-select | --pf-c-select__menu-search--PaddingTop | 0.5rem | |
| .pf-c-select | --pf-c-select__menu-search--PaddingRight | 1rem | |
| .pf-c-select | --pf-c-select__menu-search--PaddingBottom | 1rem | |
| .pf-c-select | --pf-c-select__menu-search--PaddingLeft | 1rem | |
| .pf-c-select | --pf-c-select__menu-group--menu-group--PaddingTop | 0.5rem | |
| .pf-c-select | --pf-c-select__menu-group-title--PaddingTop | 0.5rem | |
| .pf-c-select | --pf-c-select__menu-group-title--PaddingRight | 1rem | |
| .pf-c-select | --pf-c-select__menu-group-title--PaddingBottom | 0.5rem | |
| .pf-c-select | --pf-c-select__menu-group-title--PaddingLeft | 1rem | |
| .pf-c-select | --pf-c-select__menu-group-title--FontSize | 0.875rem | |
| .pf-c-select | --pf-c-select__menu-group-title--FontWeight | 700 | |
| .pf-c-select | --pf-c-select__menu-group-title--Color | #6a6e73 | |
| .pf-c-select | --pf-c-select__menu-item-count--MarginLeft | 1rem | |
| .pf-c-select | --pf-c-select__menu-item-count--FontSize | 0.875rem | |
| .pf-c-select | --pf-c-select__menu-item-count--Color | #6a6e73 | |
| .pf-c-select | --pf-c-select__menu-item--disabled__menu-item-count--Color | #6a6e73 | |
| .pf-c-select | --pf-c-select__menu-item-description--FontSize | 0.75rem | |
| .pf-c-select | --pf-c-select__menu-item-description--Color | #6a6e73 | |
| .pf-c-select | --pf-c-select__menu-item-description--PaddingRight | 1rem | |
| .pf-c-select | --pf-c-select__menu-item-main--PaddingRight | 1rem | |
| .pf-c-select | --pf-c-select__menu-item--m-selected__menu-item-main--PaddingRight | 3rem | |
| .pf-c-select | --pf-c-select__menu-footer--BoxShadow | 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) | |
| .pf-c-select | --pf-c-select__menu-footer--PaddingTop | 1rem | |
| .pf-c-select | --pf-c-select__menu-footer--PaddingRight | 1rem | |
| .pf-c-select | --pf-c-select__menu-footer--PaddingBottom | 1rem | |
| .pf-c-select | --pf-c-select__menu-footer--PaddingLeft | 1rem | |
| .pf-c-select | --pf-c-select__menu-footer--MarginTop | 0.5rem | |
| .pf-c-select | --pf-c-select__menu-footer--MarginBottom | calc(0.5rem * -1) | |
| .pf-c-select | --pf-c-select-menu--c-divider--MarginTop | 0.5rem | |
| .pf-c-select | --pf-c-select-menu--c-divider--MarginBottom | 0.5rem | |
| .pf-c-select .pf-c-divider:last-child | --pf-c-select-menu--c-divider--MarginBottom | 0 | |
| .pf-c-select.pf-m-invalid | --pf-c-select__toggle--before--BorderBottomColor | #c9190b | |
| .pf-c-select.pf-m-invalid | --pf-c-select__toggle--before--BorderBottomWidth | 2px | |
| .pf-c-select.pf-m-invalid | --pf-c-select__toggle--hover--before--BorderBottomColor | #c9190b | |
| .pf-c-select.pf-m-invalid | --pf-c-select__toggle--focus--before--BorderBottomColor | #c9190b | |
| .pf-c-select.pf-m-invalid | --pf-c-select__toggle--active--before--BorderBottomColor | #c9190b | |
| .pf-c-select.pf-m-invalid | --pf-c-select__toggle--m-expanded--before--BorderBottomColor | #c9190b | |
| .pf-c-select.pf-m-invalid | --pf-c-select__toggle-status-icon--Color | #c9190b | |