--- id: Select section: components subsection: menus cssPrefix: pf-v5-c-select deprecated: true ---import './Select.css' ## Single ### Single select ```html

``` ### Single expanded ```html

``` ### Single with top expanded ```html

``` ### Single expanded and selected ```html

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

` | Initiates a custom select. | | `.pf-v5-c-select__toggle` | `

``` ### Success ```html

``` ### Warning ```html

``` ### Invalid ```html

``` ### Accessibility | Attribute | Applied to | Outcome | | -- | -- | -- | | `aria-invalid="true"` | `.pf-v5-c-select__toggle` | Indicates that the select is in the invalid state. | | `aria-selected="true"` | `.pf-v5-c-select__menu-item` | Should be set programmatically to indicate the active item. | | `disabled` | `.pf-v5-c-select__toggle` | Disables the dropdown toggle and removes it from keyboard focus. | ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v5-c-select` | `
` | Initiates the select component. | | `.pf-v5-c-select__toggle` | `
``` ### Single with typeahead expanded ```html

``` ### Single with typeahead expanded and selected ```html

``` ### Disabled with typeahead ```html

``` ### Invalid with typeahead ```html

``` The single select typeahead should be used when the user is selecting one option from a list of items with the option to narrow the list by typing from the keyboard. Selected items are removed from the list. The user can clear the selection and restore the placeholder text. ### Accessibility | Attribute | Applied to | Outcome | | -- | -- | -- | | `aria-selected="true"` | `.pf-v5-c-select__menu-item` | Should be set programmatically to indicate the active item. | ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v5-c-select` | `
` | Initiates the select component. | | `.pf-v5-c-select__toggle` | `
` | Initiates the select toggle. | | `.pf-v5-c-select__toggle-wrapper` | `
` | Initiates the select toggle wrapper. | | `.pf-v5-c-select__toggle-typeahead` | `input.pf-v5-c-form-control` | Initiates the input field for typeahead. | | `.pf-v5-c-select__toggle-clear` | `button.pf-v5-c-button.pf-m-plain` | Initiates a clear button in the toggle. | | `.pf-v5-c-select__toggle-button` | `button.pf-v5-c-button.pf-m-plain` | Initiates a toggle button. | | `.pf-v5-c-select__toggle-arrow` | `` | Initiates the caret icon. | | `.pf-v5-c-select__menu` | `
` | Initiates the select dropdown menu. | | `.pf-v5-c-select__menu-item` | `
` | Initiates the items in the select dropdown menu. | | `.pf-m-expanded` | `.pf-v5-c-select` | Indicates the select is expanded. | | `.pf-m-typeahead` | `.pf-v5-c-select__toggle` | Indicates the select has a typeahead. | | `.pf-m-focus` | `.pf-v5-c-select__menu-item` | Modifies the menu item to apply `:focus` styling. For use when navigating the menu items by keyboard when the typeahead input field has browser focus. | ## Typeahead multiselect ### Select multi with typeahead ```html

``` ### Multi with typeahead (chip group expanded) ```html

Arkansas

Massachusetts

New Mexico

Ohio

Washington

``` ### Multi with typeahead (chip group collapsed) ```html

Arkansas

Massachusetts

New Mexico

``` ### Multi with typeahead invalid ```html

Arkansas

Massachusetts

New Mexico

Ohio

Washington

``` The multiselect should be used when the user is selecting multiple items from a list. The user can narrow the list by typing from the keyboard. The List updates while typing. Selected items create a new chip and are removed from the list. The user may clear selections individually or all at once to restore the placeholder. ### Accessibility | Attribute | Applied to | Outcome | | -- | -- | -- | | `aria-selected="true"` | `.pf-v5-c-select__menu-item` | Should be set programmatically to indicate the active item. | ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v5-c-select` | `
` | Initiates the select component. | | `.pf-v5-c-select__toggle` | `
` | Initiates the select toggle. | | `.pf-v5-c-select__toggle-wrapper` | `
` | Initiates the select toggle wrapper so that chips and input field can wrap together. | | `.pf-v5-c-chip` | `
` | Initiates a chip. (See [chip component](/components/chip) for more details) | | `.pf-v5-c-select__toggle-typeahead` | `input.pf-v5-c-form-control` | Initiates the input field for typeahead. | | `.pf-v5-c-select__toggle-clear` | `button.pf-m-plain` | Initiates a clear button in the toggle. | | `.pf-v5-c-select__toggle-button` | `
``` ### Checkbox expanded ```html

Active Canceled Paused Warning Restarted

``` ### Checkbox expanded and selected with groups ```html

Running Stopped Down Degraded Needs maintenance

Dell Samsung Hewlett-Packard

``` ### Checkbox expanded and selected with groups and filter ```html

Running Stopped Down Degraded Needs maintenance

Dell Samsung Hewlett-Packard

``` ### Checkbox expanded without badge ```html

Active Canceled Paused Warning Restarted

``` ### Checkbox with counts ```html

Active 3 Canceled 1 Paused 15 Warning 2 Restarted 8

``` The checkbox select can select multiple items using checkboxes. The number of items selected is reflected in an optional badge in the dropdown toggle. The user may clear items by unchecking or using the clear button. Optionally, items may be grouped. ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v5-c-select` | `
` | Initiates the select component. | | `.pf-v5-c-select__toggle` | `
``` ### Plain toggle expanded ```html

``` The plain select variation should be used when you do not want a border applied to the select toggle. ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v5-c-select` | `
` | Initiates the select component. | | `.pf-v5-c-select__toggle` | `
``` ### Accessibility | Attribute | Applied to | Outcome | | -- | -- | -- | | `aria-hidden="true"` | `.pf-v5-c-select__toggle-icon` | Hides the icon from assistive technologies. ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v5-c-select` | `
` | Initiates the select component. | | `.pf-v5-c-select__toggle` | `
[Panel contents here]

``` ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v5-c-select` | `
` | Initiates the select component. | | `.pf-v5-c-select__toggle` | `

``` ### Checkbox item description ```html

Active This is a description Canceled This is a really long description that describes the menu item. This is a really long description that describes the menu item. Paused Warning Restarted

``` ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v5-c-select__menu-item-description` | `` | Initiates the select menu item description element. | | `.pf-v5-c-select__menu-item-main` | `` | Initiates the select menu item main element. Used when the description element is present. | | `.pf-m-description` | `.pf-v5-c-select__menu-item` | Modifies the select menu item when selected to accommodate the description element. | ## Favorites ### Menu item favorites ```html

``` ### Accessibility | Attribute | Applied to | Outcome | | -- | -- | -- | | `aria-label="Not starred"` | `.pf-v5-c-select__menu-wrapper > .pf-v5-c-select__menu-item.pf-m-action` | Provides an accessible label indicating that the favorite action is not selected. | | `aria-label="Starred"` | `.pf-v5-c-select__menu-wrapper.pf-m-favorite > .pf-v5-c-select__menu-item.pf-m-action` | Provides an accessible label indicating that the favorite action is selected. | ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v5-c-select__menu-wrapper` | `
` | Defines a menu wrapper for use with multiple actionable items in a single item row. | | `.pf-m-favorite` | `.pf-v5-c-select__menu-wrapper` | Modifies wrapper to indicate that the item row has been favorited. | | `.pf-m-favorite-action` | `.pf-v5-c-select__menu-item` | Modifies an item for favorite styles. | | `.pf-m-link` | `.pf-v5-c-select__menu-item.pf-m-wrapper > .pf-v5-c-select__menu-item` | Modifies item for link styles. | | `.pf-m-action` | `.pf-v5-c-select__menu-item.pf-m-wrapper > .pf-v5-c-select__menu-item` | Modifies item to for action styles. | ## View more ### View more menu item ```html

``` ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-m-load` | `.pf-v5-c-select__menu-item` | Modifies a menu item for load styles. | ## Loading ### Loading menu item ```html

``` ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v5-c-select__list-item` | `
` | Defines a list item element in the select menu. | | `.pf-m-loading` | `.pf-v5-c-select__list-item` | Modifies a list item for loading styles. | ## Footer ### Menu footer ```html

``` ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v5-c-select__menu-footer` | `
` | Defines a menu footer. | | `.pf-v5-c-select__menu-list` | `
` | Defines the menu list when the list is placed in `div.pf-v5-c-select__menu`. | ## Placeholder ### Placeholder collapsed ```html

``` ### Placeholder expanded ```html

``` ### Placeholder item disabled ```html

``` ### Placeholder item enabled ```html

``` ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-m-placeholder` | `.pf-v5-c-select__toggle` | Modifies the toggle for placeholder styles. | ## Documentation ### Overview There are 4 variants of the select component: single select, single select with typeahead, multiple select with typeahead, and a multiple checkbox select. See the examples for more details about each variation. The single select should be used when the user is selecting an option from a list of items. Although the presentation is similar to the basic dropdown, the underlying HTML and ARIA tag structure is specific to a select list. The selection will replace the default text in the toggle. The selection is highlighted with the list is opened. If the selection is cleared elsewhere (i.e. from the filter bar), the default text is restored.