Examples
Appending document body vs parent
Avoid passing in document.body when passing a value to the menuAppendTo prop on the Select component, as it can cause accessibility issues. These issues can include, but are not limited to, being unable to enter the contents of the Select options via assistive technologies (like keyboards or screen readers).
Instead append to "parent" to achieve the same result without sacrificing accessibility.
In this example, while, when the dropdown is opened, both Select variants handle focus management within their dropdown contents the same way, you'll notice a difference when you try pressing the Tab key after selecting an option.
For the document.body variant, the focus will be placed at the end of the page, since that is where the dropdown content is appended to in the DOM (rather than focus being placed on the second Select variant as one might expect). For the "parent" variant, however, the focus will be placed on the next tab-able element (the "Toggle JS code" button for the code editor in this case).
Props
Select
| Name | Type | Default | Description |
|---|---|---|---|
| onTogglerequired | (isExpanded: boolean, event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event) => void | Callback for toggle button behavior | |
| aria-describedby | string | '' | Id of div for the select aria-labelledby |
| aria-invalid | boolean | false | Flag indicating if the select is an invalid state |
| aria-label | string | '' | Adds accessible text to Select |
| aria-labelledby | string | '' | Id of label for the Select aria-labelledby |
| children | React.ReactElement[] | [] | Content rendered inside the Select. Must be React.ReactElement<SelectGroupProps>[] |
| chipGroupComponent | React.ReactNode | null | Optional props to render custom chip group in the typeaheadmulti variant |
| chipGroupProps | Omit<ChipGroupProps, 'children' | 'ref'> | Optional props to pass to the chip group in the typeaheadmulti variant | |
| className | string | '' | Classes applied to the root of the Select |
| clearSelectionsAriaLabel | string | 'Clear all' | Label for clear selection button of type ahead select variants |
| createText | string | 'Create' | Text displayed in typeahead select to prompt the user to create an item |
| customBadgeText | string | number | null | Custom text for select badge |
| customContent | React.ReactNode | null | Custom content to render in the select menu. If this prop is defined, the variant prop will be ignored and the select will render with a single select toggle |
| direction | 'up' | 'down' | SelectDirection.down | Flag specifying which direction the Select menu expands |
| favorites | string[] | [] | ID list of favorited select items |
| favoritesLabel | string | 'Favorites' | Label for the favorites group |
| footer | React.ReactNode | Content rendered in the footer of the select menu | |
| hasInlineFilter | boolean | false | Flag indicating if select should have an inline text input for filtering |
| hasPlaceholderStyle | boolean | false | Flag indicating if placeholder styles should be applied |
| inlineFilterPlaceholderText | string | null | Placeholder text for inline filter |
| inputAutoComplete | string | 'off' | Value for the typeahead and inline filtering input autocomplete attribute. When targeting Chrome this property should be a random string. |
| inputIdPrefix | string | '' | Prefix for the id of the input in the checkbox select variant |
| isCheckboxSelectionBadgeHidden | boolean | Flag indicating if selection badge should be hidden for checkbox variant,default false | |
| isCreatable | boolean | false | Flag to indicate if the typeahead select allows new items |
| isCreateSelectOptionObjectBeta | boolean | false | Flag indicating if the creatable option should set its value as a SelectOptionObject |
| isDisabled | boolean | false | Flag to indicate if select is disabled |
| isGrouped | boolean | false | Flag to indicate if select options are grouped |
| isInputFilterPersistedBeta | boolean | false | Flag for retaining filter results on blur from keyboard-entered typeahead text |
| isInputValuePersisted | boolean | false | Flag for retaining keyboard-entered value in typeahead text field when focus leaves input away |
| isOpen | boolean | false | Flag to indicate if select is open |
| isPlain | boolean | false | Display the toggle with no border or background |
| loadingVariantBeta | 'spinner' | SelectViewMoreObject | Loading variant to display either the spinner or the view more text button | |
| maxHeight | string | number | Max height of the select container as a number of px or string percentage | |
| menuAppendTo | No type info | 'inline' | |
| noResultsFoundText | string | 'No results found' | Text to display in typeahead select when no results are found |
| onBlur | (event?: any) => void | Callback for toggle blur | |
| onClear | (event: React.MouseEvent) => void | () => undefined as void | Callback for typeahead clear button |
| onCreateOption | (newOptionValue: string) => void | () => undefined as void | Optional callback for newly created options |
| onFavorite | (itemId: string, isFavorite: boolean) => void | Enables favorites. Callback called when a select options's favorite button is clicked | |
| onFilter | (e: React.ChangeEvent<HTMLInputElement> | null, value: string) => React.ReactElement[] | undefined | null | Optional callback for custom filtering |
| onSelect | ( event: React.MouseEvent | React.ChangeEvent, value: string | SelectOptionObject, isPlaceholder?: boolean ) => void | Callback for selection behavior | |
| onTypeaheadInputChanged | (value: string) => void | null | Optional event handler called each time the value in the typeahead input changes. |
| ouiaSafe | No type info | true | |
| placeholderText | string | React.ReactNode | '' | Title text of Select |
| position | SelectPosition | 'right' | 'left' | SelectPosition.left | Indicates where menu will be aligned horizontally |
| removeSelectionAriaLabel | string | 'Remove' | Label for remove chip button of multiple type ahead select variant |
| selections | string | SelectOptionObject | (string | SelectOptionObject)[] | [] | Array of selected items for multi select variants. |
| shouldResetOnSelect | boolean | true | Flag indicating the typeahead input value should reset upon selection |
| toggleAriaLabel | string | 'Options menu' | Label for toggle of type ahead select variants |
| toggleIcon | React.ReactElement | null | Icon element to render inside the select toggle |
| toggleId | string | null | Id for select toggle element |
| 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 | initial | |
| .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__toggle--m-placeholder--Color | 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--m-placeholder__toggle-text--Color | #6a6e73 | |
| .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--m-plain__toggle-arrow--Color | #6a6e73 | |
| .pf-c-select | --pf-c-select--m-plain--hover__toggle-arrow--Color | #151515 | |
| .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--Width | auto | |
| .pf-c-select | --pf-c-select__menu--MinWidth | 100% | |
| .pf-c-select | --pf-c-select__menu--m-top--TranslateY | calc(-100% - 0.25rem) | |
| .pf-c-select | --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--disabled--Color | #6a6e73 | |
| .pf-c-select | --pf-c-select__menu-item--Width | 100% | |
| .pf-c-select | --pf-c-select__menu-item--hover--BackgroundColor | #f0f0f0 | |
| .pf-c-select | --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 | #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-item--m-action--disabled--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-favorite-action--Color | #6a6e73 | |
| .pf-c-select | --pf-c-select__menu-item--m-favorite-action--hover--Color | #151515 | |
| .pf-c-select | --pf-c-select__menu-item--m-favorite-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-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color | #c58c00 | |
| .pf-c-select | --pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color | #c58c00 | |
| .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 | |