Examples
Props
Select
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| aria-label | string | No | '' | Adds accessible text to Select |
| aria-labelledby | string | No | '' | Id of label for the Select aria-labelledby |
| children | React.ReactElement[] | No | [] | Content rendered inside the Select. Must be React.ReactElement<SelectGroupProps>[] |
| chipGroupComponent | React.ReactNode | No | null | Optional props to render custom chip group in the typeaheadmulti variant |
| chipGroupProps | Omit<ChipGroupProps, 'children' | 'ref'> | No | Optional props to pass to the chip group in the typeaheadmulti variant | |
| className | string | No | '' | Classes applied to the root of the Select |
| clearSelectionsAriaLabel | string | No | 'Clear all' | Label for clear selection button of type ahead select variants |
| createText | string | No | 'Create' | Text displayed in typeahead select to prompt the user to create an item |
| customBadgeText | string | number | No | null | Custom text for select badge |
| customContent | React.ReactNode | No | null | Custom content to render in the select menu. If this prop is defined, the variant prop will be ignored and the select will render with a single select toggle |
| direction | 'up' | 'down' | No | SelectDirection.down | Flag specifying which direction the Select menu expands |
| favorites | string[] | No | [] | ID list of favorited select items |
| favoritesLabel | string | No | 'Favorites' | Label for the favorites group |
| hasInlineFilter | boolean | No | false | Flag indicating if select should have an inline text input for filtering |
| inlineFilterPlaceholderText | string | No | null | Placeholder text for inline filter |
| inputIdPrefix | string | No | '' | Prefix for the id of the input in the checkbox select variant |
| isCheckboxSelectionBadgeHidden | boolean | No | Flag indicating if selection badge should be hidden for checkbox variant,default false | |
| isCreatable | boolean | No | false | Flag to indicate if the typeahead select allows new items |
| isDisabled | boolean | No | false | Flag to indicate if select is disabled |
| isGrouped | boolean | No | false | Flag to indicate if select options are grouped |
| isOpen | boolean | No | false | Flag to indicate if select is open |
| isPlain | boolean | No | false | Display the toggle with no border or background |
| maxHeight | string | number | No | Max height of the select container as a number of px or string percentage | |
| menuAppendTo | No type info | No | 'inline' | |
| noResultsFoundText | string | No | 'No results found' | Text to display in typeahead select when no results are found |
| onClear | (event: React.MouseEvent) => void | No | () => undefined as void | Callback for typeahead clear button |
| onCreateOption | (newOptionValue: string) => void | No | () => undefined as void | Optional callback for newly created options |
| onFavorite | (itemId: string, isFavorite: boolean) => void | No | Enables favorites. Callback called when a select options's favorite button is clicked | |
| onFilter | (e: React.ChangeEvent<HTMLInputElement>) => React.ReactElement[] | No | null | Optional callback for custom filtering |
| onSelect | ( event: React.MouseEvent | React.ChangeEvent, value: string | SelectOptionObject, isPlaceholder?: boolean ) => void | No | Callback for selection behavior | |
| onToggle | (isExpanded: boolean) => void | Yes | Callback for toggle button behavior | |
| onTypeaheadInputChanged | (value: string) => void | No | null | Optional event handler called each time the value in the typeahead input changes. |
| ouiaSafe | No type info | No | true | |
| placeholderText | string | React.ReactNode | No | '' | Title text of Select |
| removeSelectionAriaLabel | string | No | 'Remove' | Label for remove chip button of multiple type ahead select variant |
| selections | string | SelectOptionObject | (string | SelectOptionObject)[] | No | [] | Array of selected items for multi select variants. |
| toggleAriaLabel | string | No | 'Options menu' | Label for toggle of type ahead select variants |
| toggleIcon | React.ReactElement | No | null | Icon element to render inside the select toggle |
| toggleId | string | No | null | Id for select toggle element |
| typeAheadAriaLabel | string | No | '' | Label for input field of type ahead select variants |
| variant | 'single' | 'checkbox' | 'typeahead' | 'typeaheadmulti' | No | SelectVariant.single | Variant of rendered Select |
| width | string | number | No | '' | Width of the select container as a number of px or string percentage |
SelectOption
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| ariaIsFavoriteLabel | string | No | Aria label text for favoritable button when favorited | |
| ariaIsNotFavoriteLabel | string | No | Aria label text for favoritable button when not favorited | |
| children | React.ReactNode | No | Optional alternate display for the option | |
| className | string | No | '' | Additional classes added to the Select Option |
| component | React.ReactNode | No | 'button' | Indicates which component will be used as select item |
| description | React.ReactNode | No | Description of the item for single and both typeahead select variants | |
| id | string | No | ID of the item. Required for tracking favorites | |
| index | number | No | 0 | Internal index of the option |
| inputId | string | No | '' | Id of the checkbox input |
| isChecked | boolean | No | false | Internal flag indicating if the option is checked |
| isDisabled | boolean | No | false | Flag indicating if the option is disabled |
| isFavorite | boolean | No | null | Internal Flag indicating if the option is favorited |
| isFocused | boolean | No | Flag forcing the focused state | |
| isNoResultsOption | boolean | No | false | Flag indicating if the option acts as a "no results" indicator |
| isPlaceholder | boolean | No | false | Flag indicating if the option acts as a placeholder |
| isSelected | boolean | No | false | Internal flag indicating if the option is selected |
| keyHandler | (index: number, innerIndex: number, position: string) => void | No | () => {} | Internal callback for keyboard navigation |
| onClick | (event: React.MouseEvent | React.ChangeEvent) => void | No | () => {} | Optional callback for click event |
| sendRef | ( ref: React.ReactNode, favoriteRef: React.ReactNode, optionContainerRef: React.ReactNode, index: number ) => void | No | () => {} | Internal callback for ref tracking |
| value | string | SelectOptionObject | No | '' | The value for the option, can be a string or select option object |
SelectGroup
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | [] | Checkboxes within group. Must be React.ReactElement<SelectOptionProps>[] |
| className | string | No | '' | Additional classes added to the CheckboxSelectGroup control |
| label | string | No | '' | Group label |
| titleId | string | No | '' | ID for title label |
SelectOptionObject
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| compareTo | No type info | No | Function returns a true if the passed in select option is equal to this select option object, false otherwise | |
| toString | No type info | Yes | Function returns a string to represent the select option object |
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--BorderWidth | 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--active--before--BorderBottomColor | #06c | |
| .pf-c-select | --pf-c-select__toggle--m-expanded--before--BorderBottomColor | #06c | |
| .pf-c-select | --pf-c-select__toggle--focus--before--BorderBottomWidth | 2px | |
| .pf-c-select | --pf-c-select__toggle--active--before--BorderBottomWidth | 2px | |
| .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-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 | 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--MinWidth | 7.5rem | |
| .pf-c-select | --pf-c-select__toggle-typeahead--focus--PaddingBottom | calc(0.375rem - 1px) | |
| .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-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__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-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-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--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__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:hover::before | --pf-c-select__toggle--before--BorderBottomColor | #06c | |
| .pf-c-select__toggle:focus::before | --pf-c-select__toggle--before--BorderBottomColor | #06c | |
| .pf-c-select__toggle:active::before | --pf-c-select__toggle--before--BorderBottomColor | #06c | |
| .pf-m-expanded > .pf-c-select__toggle::before | --pf-c-select__toggle--before--BorderBottomColor | #06c | |
| .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-wrapper.pf-m-favorite .pf-c-select__menu-item.pf-m-favorite-action | --pf-c-select__menu-item--Color | #f0ab00 | |
| .pf-c-select__menu-item:hover | --pf-c-select__menu-item--m-action--Color | #6a6e73 | |
| .pf-c-select__menu-item.pf-m-link | --pf-c-select__menu-item--PaddingRight | 0 | |
| .pf-c-select__menu-item.pf-m-link | --pf-c-select__menu-item-main--PaddingRight | 0 | |
| .pf-c-select__menu-item.pf-m-link | --pf-c-select__menu-item-description--PaddingRight | 0 | |
| .pf-c-select__menu-item.pf-m-link | --pf-c-select__menu-item--Width | auto | |
| .pf-c-select__menu-item.pf-m-link | --pf-c-select__menu-item--hover--BackgroundColor | transparent | |
| .pf-c-select__menu-item.pf-m-link | --pf-c-select__menu-item--focus--BackgroundColor | transparent | |
| .pf-c-select__menu-item.pf-m-action | --pf-c-select__menu-item--Color | #d2d2d2 | |
| .pf-c-select__menu-item.pf-m-action | --pf-c-select__menu-item--Width | auto | |
| .pf-c-select__menu-item.pf-m-action | --pf-c-select__menu-item--hover--BackgroundColor | transparent | |
| .pf-c-select__menu-item.pf-m-action | --pf-c-select__menu-item--focus--BackgroundColor | transparent | |
| .pf-c-select__menu-item.pf-m-action:hover | --pf-c-select__menu-item--m-action--Color | #151515 | |
| .pf-c-select__menu-item.pf-m-action:focus | --pf-c-select__menu-item--m-action--Color | #151515 | |
| .pf-c-select__menu-item.pf-m-selected | --pf-c-select__menu-item--PaddingRight | 3rem | |
| .pf-c-select__menu-item.pf-m-selected | --pf-c-select__menu-item-main--PaddingRight | 3rem | |
| .pf-c-select__menu-item.pf-m-description:not(.pf-c-check) | --pf-c-select__menu-item--PaddingRight | 0 | |
View source on GitHub
