@patternfly/patternfly

--- id: Select section: components subsection: menus cssPrefix: pf-v5-c-select deprecated: true ---import './Select.css' ## Single ### Single select ```html <div class="pf-v5-c-select"> <span id="select-single-label" hidden>Choose one</span> <button class="pf-v5-c-select__toggle" type="button" id="select-single-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="select-single-label select-single-toggle" > <div class="pf-v5-c-select__toggle-wrapper"> <span class="pf-v5-c-select__toggle-text">Filter by status</span> </div> <span class="pf-v5-c-select__toggle-arrow"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <ul class="pf-v5-c-select__menu" role="listbox" aria-labelledby="select-single-label" hidden > <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Running</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item pf-m-selected" role="option" aria-selected="true" > Stopped <span class="pf-v5-c-select__menu-item-icon"> <i class="fas fa-check" aria-hidden="true"></i> </span> </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Down</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Degraded</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button> </li> </ul> </div> ``` ### Single expanded ```html <div class="pf-v5-c-select pf-m-expanded"> <span id="select-single-expanded-label" hidden>Choose one</span> <button class="pf-v5-c-select__toggle" type="button" id="select-single-expanded-toggle" aria-haspopup="true" aria-expanded="true" aria-labelledby="select-single-expanded-label select-single-expanded-toggle" > <div class="pf-v5-c-select__toggle-wrapper"> <span class="pf-v5-c-select__toggle-text">Filter by status</span> </div> <span class="pf-v5-c-select__toggle-arrow"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <ul class="pf-v5-c-select__menu" role="listbox" aria-labelledby="select-single-expanded-label" > <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Running</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item pf-m-selected" role="option" aria-selected="true" > Stopped <span class="pf-v5-c-select__menu-item-icon"> <i class="fas fa-check" aria-hidden="true"></i> </span> </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Down</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Degraded</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button> </li> </ul> </div> ``` ### Single with top expanded ```html <div class="pf-v5-c-select pf-m-expanded pf-m-top"> <span id="select-single-top-expanded-label" hidden>Choose one</span> <button class="pf-v5-c-select__toggle" type="button" id="select-single-top-expanded-toggle" aria-haspopup="true" aria-expanded="true" aria-labelledby="select-single-top-expanded-label select-single-top-expanded-toggle" > <div class="pf-v5-c-select__toggle-wrapper"> <span class="pf-v5-c-select__toggle-text">Filter by status</span> </div> <span class="pf-v5-c-select__toggle-arrow"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <ul class="pf-v5-c-select__menu" role="listbox" aria-labelledby="select-single-top-expanded-label" > <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Running</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item pf-m-selected" role="option" aria-selected="true" > Stopped <span class="pf-v5-c-select__menu-item-icon"> <i class="fas fa-check" aria-hidden="true"></i> </span> </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Down</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Degraded</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button> </li> </ul> </div> ``` ### Single expanded and selected ```html <div class="pf-v5-c-select pf-m-expanded"> <span id="select-single-expanded-selected-label" hidden>Choose one</span> <button class="pf-v5-c-select__toggle" type="button" id="select-single-expanded-selected-toggle" aria-haspopup="true" aria-expanded="true" aria-labelledby="select-single-expanded-selected-label select-single-expanded-selected-toggle" > <div class="pf-v5-c-select__toggle-wrapper"> <span class="pf-v5-c-select__toggle-text">April</span> </div> <span class="pf-v5-c-select__toggle-arrow"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <ul class="pf-v5-c-select__menu" role="listbox" aria-labelledby="select-single-expanded-selected-label" > <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Running</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item pf-m-selected" role="option" aria-selected="true" > Stopped <span class="pf-v5-c-select__menu-item-icon"> <i class="fas fa-check" aria-hidden="true"></i> </span> </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Down</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Degraded</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button> </li> </ul> </div> ``` 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` | `<div>` | Initiates a custom select. | | `.pf-v5-c-select__toggle` | `<button>` | Initiates a custom toggle. | | `.pf-v5-c-select__toggle-wrapper` | `<div>` | Initiates a custom select toggle wrapper. | | `.pf-v5-c-select__toggle-arrow` | `<span>` | Initiates the caret to toggle the dropdown. | | `.pf-v5-c-select__menu` | `<ul>` | Initiates the custom select dropdown menu. | | `.pf-v5-c-select__menu-item` | `<li>` | Initiates the items in the custom select dropdown menu. | | `.pf-v5-c-select__menu-item-icon` | `<i>` | Initiates the selected item icon. | | `.pf-m-top` | `.pf-v5-c-select` | Modifies the select menu to display above the toggle. | | `.pf-m-align-right` | `.pf-v5-c-select__menu` | Modifies the select menu to display right aligned to the toggle. | | `.pf-m-static` | `.pf-v5-c-select__menu` | Modifies the select menu to be statically positioned to support custom positioning. | | `.pf-m-active` | `.pf-v5-c-select` | Forces display of the active state of the toggle. | ## States ### Disabled ```html <div class="pf-v5-c-select"> <span id="select-disabled-label" hidden>Choose one</span> <button class="pf-v5-c-select__toggle" type="button" id="select-disabled-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="select-disabled-label select-disabled-toggle" disabled > <div class="pf-v5-c-select__toggle-wrapper"> <span class="pf-v5-c-select__toggle-text">Filter by status</span> </div> <span class="pf-v5-c-select__toggle-arrow"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <ul class="pf-v5-c-select__menu" role="listbox" aria-labelledby="select-disabled-label" hidden > <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Running</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item pf-m-selected" role="option" aria-selected="true" > Stopped <span class="pf-v5-c-select__menu-item-icon"> <i class="fas fa-check" aria-hidden="true"></i> </span> </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Down</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Degraded</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button> </li> </ul> </div> ``` ### Success ```html <div class="pf-v5-c-select pf-m-success"> <span id="select-success-label" hidden>Choose one</span> <button class="pf-v5-c-select__toggle" type="button" id="select-success-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="select-success-label select-success-toggle" > <div class="pf-v5-c-select__toggle-wrapper"> <span class="pf-v5-c-select__toggle-text">Filter by status</span> </div> <span class="pf-v5-c-select__toggle-status-icon"> <i class="fas fa-check-circle" aria-hidden="true"></i> </span> <span class="pf-v5-c-select__toggle-arrow"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <ul class="pf-v5-c-select__menu" role="listbox" aria-labelledby="select-success-label" hidden > <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Running</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item pf-m-selected" role="option" aria-selected="true" > Stopped <span class="pf-v5-c-select__menu-item-icon"> <i class="fas fa-check" aria-hidden="true"></i> </span> </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Down</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Degraded</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button> </li> </ul> </div> ``` ### Warning ```html <div class="pf-v5-c-select pf-m-warning"> <span id="select-warning-label" hidden>Choose one</span> <button class="pf-v5-c-select__toggle" type="button" id="select-warning-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="select-warning-label select-warning-toggle" > <div class="pf-v5-c-select__toggle-wrapper"> <span class="pf-v5-c-select__toggle-text">Filter by status</span> </div> <span class="pf-v5-c-select__toggle-status-icon"> <i class="fas fa-exclamation-triangle" aria-hidden="true"></i> </span> <span class="pf-v5-c-select__toggle-arrow"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <ul class="pf-v5-c-select__menu" role="listbox" aria-labelledby="select-warning-label" hidden > <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Running</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item pf-m-selected" role="option" aria-selected="true" > Stopped <span class="pf-v5-c-select__menu-item-icon"> <i class="fas fa-check" aria-hidden="true"></i> </span> </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Down</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Degraded</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button> </li> </ul> </div> ``` ### Invalid ```html <div class="pf-v5-c-select pf-m-invalid"> <span id="select-invalid-label" hidden>Choose one</span> <button class="pf-v5-c-select__toggle" type="button" id="select-invalid-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="select-invalid-label select-invalid-toggle" aria-invalid="true" > <div class="pf-v5-c-select__toggle-wrapper"> <span class="pf-v5-c-select__toggle-text">Filter by status</span> </div> <span class="pf-v5-c-select__toggle-status-icon"> <i class="fas fa-exclamation-circle" aria-hidden="true"></i> </span> <span class="pf-v5-c-select__toggle-arrow"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <ul class="pf-v5-c-select__menu" role="listbox" aria-labelledby="select-invalid-label" hidden > <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Running</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item pf-m-selected" role="option" aria-selected="true" > Stopped <span class="pf-v5-c-select__menu-item-icon"> <i class="fas fa-check" aria-hidden="true"></i> </span> </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Down</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Degraded</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button> </li> </ul> </div> ``` ### 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` | `<div>` | Initiates the select component. | | `.pf-v5-c-select__toggle` | `<button>` | Initiates the select toggle. | | `.pf-v5-c-select__toggle-wrapper` | `<div>` | Initiates the select toggle wrapper. | | `.pf-v5-c-select__toggle-arrow` | `<span>` | Initiates the caret to toggle the dropdown. | | `.pf-v5-c-select__menu` | `<ul>` | Initiates the select dropdown menu. | | `.pf-v5-c-select__menu-item` | `<li>` | Initiates the items in the select dropdown menu. | | `.pf-v5-c-select__menu-item-icon` | `<span>` | Initiates the selected item icon wrapper. | | `.pf-m-expanded` | `.pf-v5-c-select` | Indicates the select is expanded. | | `.pf-m-success` | `.pf-v5-c-select` | Modifies select component for the success state. | | `.pf-m-warning` | `.pf-v5-c-select` | Modifies select component for the warning state. | | `.pf-m-invalid` | `.pf-v5-c-select` | Modifies select component for the invalid state. | | `.pf-m-selected` | `.pf-v5-c-select__menu-item` | Indicates the menu item is selected. | | `.pf-m-disabled` | `div.pf-v5-c-select__toggle` | Modifies to display the select toggle as disabled. This applies to `div.pf-v5-c-select__toggle` and should not be used in lieu of the `disabled` attribute on `button.pf-v5-c-select__toggle`. When this is used, `disabled` should also be added to any form elements in `div.pf-v5-c-select__toggle`| ## Typeahead ### Single with typeahead ```html <div class="pf-v5-c-select"> <span id="select-single-typeahead-label" hidden>Choose a state</span> <div class="pf-v5-c-select__toggle pf-m-typeahead"> <div class="pf-v5-c-select__toggle-wrapper"> <span class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"> <input type="text" id="select-single-typeahead-typeahead" aria-label="Type to filter" value placeholder="Choose a state" /> </span> </div> <button class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-button" type="button" id="select-single-typeahead-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="select-single-typeahead-label select-single-typeahead-toggle" aria-label="Select" > <i class="fas fa-caret-down pf-v5-c-select__toggle-arrow" aria-hidden="true" ></i> </button> </div> <ul class="pf-v5-c-select__menu" aria-labelledby="select-single-typeahead-label" role="listbox" hidden > <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Alabama</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Florida</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option"> New  Jersey </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item pf-m-selected" role="option" aria-selected="true" > New  Mexico <span class="pf-v5-c-select__menu-item-icon"> <i class="fas fa-check" aria-hidden="true"></i> </span> </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option"> New  York </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">North Carolina</button> </li> </ul> </div> ``` ### Single with typeahead expanded ```html <div class="pf-v5-c-select pf-m-expanded"> <span id="select-single-typeahead-expanded-label" hidden>Choose a state</span> <div class="pf-v5-c-select__toggle pf-m-typeahead"> <div class="pf-v5-c-select__toggle-wrapper"> <span class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"> <input type="text" id="select-single-typeahead-expanded-typeahead" aria-label="Type to filter" value="New" placeholder="Choose a state" /> </span> </div> <button class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-clear" type="button" aria-label="Clear all" > <i class="fas fa-times-circle" aria-hidden="true"></i> </button> <button class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-button" type="button" id="select-single-typeahead-expanded-toggle" aria-haspopup="true" aria-expanded="true" aria-labelledby="select-single-typeahead-expanded-label select-single-typeahead-expanded-toggle" aria-label="Select" > <i class="fas fa-caret-down pf-v5-c-select__toggle-arrow" aria-hidden="true" ></i> </button> </div> <ul class="pf-v5-c-select__menu" aria-labelledby="select-single-typeahead-expanded-label" role="listbox" > <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option"> <mark class="pf-v5-c-select__menu-item--match">New</mark>  Jersey </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item pf-m-selected" role="option" aria-selected="true" > <mark class="pf-v5-c-select__menu-item--match">New</mark>  Mexico <span class="pf-v5-c-select__menu-item-icon"> <i class="fas fa-check" aria-hidden="true"></i> </span> </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option"> <mark class="pf-v5-c-select__menu-item--match">New</mark>  York </button> </li> </ul> </div> ``` ### Single with typeahead expanded and selected ```html <div class="pf-v5-c-select pf-m-expanded"> <span id="select-single-typeahead-expanded-selected-label" hidden >Choose a state</span> <div class="pf-v5-c-select__toggle pf-m-typeahead"> <div class="pf-v5-c-select__toggle-wrapper"> <span class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"> <input type="text" id="select-single-typeahead-expanded-selected-typeahead" aria-label="Type to filter" value="New Mexico" placeholder="Choose a state" /> </span> </div> <button class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-clear" type="button" aria-label="Clear all" > <i class="fas fa-times-circle" aria-hidden="true"></i> </button> <button class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-button" type="button" id="select-single-typeahead-expanded-selected-toggle" aria-haspopup="true" aria-expanded="true" aria-labelledby="select-single-typeahead-expanded-selected-label select-single-typeahead-expanded-selected-toggle" aria-label="Select" > <i class="fas fa-caret-down pf-v5-c-select__toggle-arrow" aria-hidden="true" ></i> </button> </div> <ul class="pf-v5-c-select__menu" aria-labelledby="select-single-typeahead-expanded-selected-label" role="listbox" > <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Alabama</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Florida</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option"> New  Jersey </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item pf-m-selected" role="option" aria-selected="true" > New  Mexico <span class="pf-v5-c-select__menu-item-icon"> <i class="fas fa-check" aria-hidden="true"></i> </span> </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option"> New  York </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">North Carolina</button> </li> </ul> </div> ``` ### Disabled with typeahead ```html <div class="pf-v5-c-select"> <span id="select-single-typeahead-disabled-label" hidden>Choose a state</span> <div class="pf-v5-c-select__toggle pf-m-typeahead pf-m-disabled"> <div class="pf-v5-c-select__toggle-wrapper"> <span class="pf-v5-c-form-control pf-m-disabled pf-v5-c-select__toggle-typeahead" > <input disabled type="text" id="select-single-typeahead-disabled-typeahead" aria-label="Type to filter" placeholder="Choose a state" /> </span> </div> <button class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-button" type="button" id="select-single-typeahead-disabled-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="select-single-typeahead-disabled-label select-single-typeahead-disabled-toggle" aria-label="Select" disabled > <i class="fas fa-caret-down pf-v5-c-select__toggle-arrow" aria-hidden="true" ></i> </button> </div> <ul class="pf-v5-c-select__menu" aria-labelledby="select-single-typeahead-disabled-label" role="listbox" hidden > <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Alabama</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Florida</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option"> New  Jersey </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item pf-m-selected" role="option" aria-selected="true" > New  Mexico <span class="pf-v5-c-select__menu-item-icon"> <i class="fas fa-check" aria-hidden="true"></i> </span> </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option"> New  York </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">North Carolina</button> </li> </ul> </div> ``` ### Invalid with typeahead ```html <div class="pf-v5-c-select pf-m-invalid"> <span id="select-single-typeahead-invalid-label" hidden>Choose a state</span> <div class="pf-v5-c-select__toggle pf-m-typeahead"> <div class="pf-v5-c-select__toggle-wrapper"> <span class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"> <input type="text" id="select-single-typeahead-invalid-typeahead" aria-invalid="true" value="Invalid" aria-label="Type to filter" placeholder="Choose a state" /> </span> </div> <span class="pf-v5-c-select__toggle-status-icon"> <i class="fas fa-exclamation-circle" aria-hidden="true"></i> </span> <button class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-button" type="button" id="select-single-typeahead-invalid-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="select-single-typeahead-invalid-label select-single-typeahead-invalid-toggle" aria-label="Select" > <i class="fas fa-caret-down pf-v5-c-select__toggle-arrow" aria-hidden="true" ></i> </button> </div> <ul class="pf-v5-c-select__menu" aria-labelledby="select-single-typeahead-invalid-label" role="listbox" hidden > <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Alabama</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Florida</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option"> New  Jersey </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item pf-m-selected" role="option" aria-selected="true" > New  Mexico <span class="pf-v5-c-select__menu-item-icon"> <i class="fas fa-check" aria-hidden="true"></i> </span> </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option"> New  York </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">North Carolina</button> </li> </ul> </div> ``` 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` | `<div>` | Initiates the select component. | | `.pf-v5-c-select__toggle` | `<div>` | Initiates the select toggle. | | `.pf-v5-c-select__toggle-wrapper` | `<div>` | 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` | `<span>` | Initiates the caret icon. | | `.pf-v5-c-select__menu` | `<ul>` | Initiates the select dropdown menu. | | `.pf-v5-c-select__menu-item` | `<li>` | 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 <div class="pf-v5-c-select"> <span id="select-multi-typeahead-label" hidden>Choose states</span> <div class="pf-v5-c-select__toggle pf-m-typeahead"> <div class="pf-v5-c-select__toggle-wrapper"> <span class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"> <input type="text" id="select-multi-typeahead-typeahead" aria-label="Type to filter" value placeholder="Choose states" /> </span> </div> <button class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-button" type="button" id="select-multi-typeahead-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="select-multi-typeahead-label select-multi-typeahead-toggle" aria-label="Select" > <i class="fas fa-caret-down pf-v5-c-select__toggle-arrow" aria-hidden="true" ></i> </button> </div> <ul class="pf-v5-c-select__menu" aria-labelledby="select-multi-typeahead-label" role="listbox" hidden > <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Alabama</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Florida</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option"> New  Jersey </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option"> New  York </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">North Carolina</button> </li> </ul> </div> ``` ### Multi with typeahead (chip group expanded) ```html <div class="pf-v5-c-select pf-m-expanded"> <span id="select-multi-typeahead-expanded-label" hidden>Choose states</span> <div class="pf-v5-c-select__toggle pf-m-typeahead"> <div class="pf-v5-c-select__toggle-wrapper"> <div class="pf-v5-c-chip-group" role="group"> <div class="pf-v5-c-chip-group__main"> <ul class="pf-v5-c-chip-group__list" role="list" aria-label="Chip group list" > <li class="pf-v5-c-chip-group__list-item"> <div class="pf-v5-c-chip"> <span class="pf-v5-c-chip__content"> <span class="pf-v5-c-chip__text" id="select-multi-typeahead-expanded-chip_one" >Arkansas</span> </span> <span class="pf-v5-c-chip__actions"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-labelledby="remove_select-multi-typeahead-expanded_chip_one select-multi-typeahead-expanded-chip_two" aria-label="Remove" id="remove_select-multi-typeahead-expanded_chip_one" > <i class="fas fa-times" aria-hidden="true"></i> </button> </span> </div> </li> <li class="pf-v5-c-chip-group__list-item"> <div class="pf-v5-c-chip"> <span class="pf-v5-c-chip__content"> <span class="pf-v5-c-chip__text" id="select-multi-typeahead-expanded-chip_two" >Massachusetts</span> </span> <span class="pf-v5-c-chip__actions"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-labelledby="remove_select-multi-typeahead-expanded_chip_two select-multi-typeahead-expanded-chip_two" aria-label="Remove" id="remove_select-multi-typeahead-expanded_chip_two" > <i class="fas fa-times" aria-hidden="true"></i> </button> </span> </div> </li> <li class="pf-v5-c-chip-group__list-item"> <div class="pf-v5-c-chip"> <span class="pf-v5-c-chip__content"> <span class="pf-v5-c-chip__text" id="select-multi-typeahead-expanded-chip_three" >New Mexico</span> </span> <span class="pf-v5-c-chip__actions"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-labelledby="remove_select-multi-typeahead-expanded_chip_three select-multi-typeahead-expanded-chip_three" aria-label="Remove" id="remove_select-multi-typeahead-expanded_chip_three" > <i class="fas fa-times" aria-hidden="true"></i> </button> </span> </div> </li> <li class="pf-v5-c-chip-group__list-item"> <div class="pf-v5-c-chip"> <span class="pf-v5-c-chip__content"> <span class="pf-v5-c-chip__text" id="select-multi-typeahead-expanded-chip_four" >Ohio</span> </span> <span class="pf-v5-c-chip__actions"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-labelledby="remove_select-multi-typeahead-expanded_chip_four select-multi-typeahead-expanded-chip_four" aria-label="Remove" id="remove_select-multi-typeahead-expanded_chip_four" > <i class="fas fa-times" aria-hidden="true"></i> </button> </span> </div> </li> <li class="pf-v5-c-chip-group__list-item"> <div class="pf-v5-c-chip"> <span class="pf-v5-c-chip__content"> <span class="pf-v5-c-chip__text" id="select-multi-typeahead-expanded-chip_five" >Washington</span> </span> <span class="pf-v5-c-chip__actions"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-labelledby="remove_select-multi-typeahead-expanded_chip_five select-multi-typeahead-expanded-chip_five" aria-label="Remove" id="remove_select-multi-typeahead-expanded_chip_five" > <i class="fas fa-times" aria-hidden="true"></i> </button> </span> </div> </li> </ul> </div> </div> <span class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"> <input type="text" id="select-multi-typeahead-expanded-typeahead" aria-label="Type to filter" value placeholder="Choose states" /> </span> </div> <button class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-clear" type="button" aria-label="Clear all" > <i class="fas fa-times-circle" aria-hidden="true"></i> </button> <button class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-button" type="button" id="select-multi-typeahead-expanded-toggle" aria-haspopup="true" aria-expanded="true" aria-labelledby="select-multi-typeahead-expanded-label select-multi-typeahead-expanded-toggle" aria-label="Select" > <i class="fas fa-caret-down pf-v5-c-select__toggle-arrow" aria-hidden="true" ></i> </button> </div> <ul class="pf-v5-c-select__menu" aria-labelledby="select-multi-typeahead-expanded-label" role="listbox" > <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Alabama</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">Florida</button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option"> New  Jersey </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option"> New  York </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option">North Carolina</button> </li> </ul> </div> ``` ### Multi with typeahead (chip group collapsed) ```html <div class="pf-v5-c-select pf-m-expanded"> <span id="select-multi-typeahead-expanded-selected-label" hidden>Choose states</span> <div class="pf-v5-c-select__toggle pf-m-typeahead"> <div class="pf-v5-c-select__toggle-wrapper"> <div class="pf-v5-c-chip-group" role="group"> <div class="pf-v5-c-chip-group__main"> <ul class="pf-v5-c-chip-group__list" role="list" aria-label="Chip group list" > <li class="pf-v5-c-chip-group__list-item"> <div class="pf-v5-c-chip"> <span class="pf-v5-c-chip__content"> <span class="pf-v5-c-chip__text" id="select-multi-typeahead-expanded-selected-chip_one" >Arkansas</span> </span> <span class="pf-v5-c-chip__actions"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_one select-multi-typeahead-expanded-selected-chip_one" aria-label="Remove" id="remove_select-multi-typeahead-expanded-selected_chip_one" > <i class="fas fa-times" aria-hidden="true"></i> </button> </span> </div> </li> <li class="pf-v5-c-chip-group__list-item"> <div class="pf-v5-c-chip"> <span class="pf-v5-c-chip__content"> <span class="pf-v5-c-chip__text" id="select-multi-typeahead-expanded-selected-chip_two" >Massachusetts</span> </span> <span class="pf-v5-c-chip__actions"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_two select-multi-typeahead-expanded-selected-chip_two" aria-label="Remove" id="remove_select-multi-typeahead-expanded-selected_chip_two" > <i class="fas fa-times" aria-hidden="true"></i> </button> </span> </div> </li> <li class="pf-v5-c-chip-group__list-item"> <div class="pf-v5-c-chip"> <span class="pf-v5-c-chip__content"> <span class="pf-v5-c-chip__text" id="select-multi-typeahead-expanded-selected-chip_three" >New Mexico</span> </span> <span class="pf-v5-c-chip__actions"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_three select-multi-typeahead-expanded-selected-chip_three" aria-label="Remove" id="remove_select-multi-typeahead-expanded-selected_chip_three" > <i class="fas fa-times" aria-hidden="true"></i> </button> </span> </div> </li> <li class="pf-v5-c-chip-group__list-item"> <button class="pf-v5-c-chip pf-m-overflow"> <span class="pf-v5-c-chip__content"> <span class="pf-v5-c-chip__text">2 more</span> </span> </button> </li> </ul> </div> </div> <span class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"> <input type="text" id="select-multi-typeahead-expanded-selected-typeahead" aria-label="Type to filter" value="New" placeholder="Choose states" /> </span> </div> <button class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-clear" type="button" aria-label="Clear all" > <i class="fas fa-times-circle" aria-hidden="true"></i> </button> <button class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-button" type="button" id="select-multi-typeahead-expanded-selected-toggle" aria-haspopup="true" aria-expanded="true" aria-labelledby="select-multi-typeahead-expanded-selected-label select-multi-typeahead-expanded-selected-toggle" aria-label="Select" > <i class="fas fa-caret-down pf-v5-c-select__toggle-arrow" aria-hidden="true" ></i> </button> </div> <ul class="pf-v5-c-select__menu" aria-labelledby="select-multi-typeahead-expanded-selected-label" role="listbox" > <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option"> <mark class="pf-v5-c-select__menu-item--match">New</mark>  Jersey </button> </li> <li role="presentation"> <button class="pf-v5-c-select__menu-item" role="option"> <mark class="pf-v5-c-select__menu-item--match">New</mark>  York </button> </li> </ul> </div> ``` ### Multi with typeahead invalid ```html <div class="pf-v5-c-select pf-m-expanded pf-m-invalid"> <span id="select-multi-typeahead-invalid-label" hidden>Choose states</span> <div class="pf-v5-c-select__toggle pf-m-typeahead"> <div class="pf-v5-c-select__toggle-wrapper"> <div class="pf-v5-c-chip-group" role="group"> <div class="pf-v5-c-chip-group__main"> <ul class="pf-v5-c-chip-group__list" role="list" aria-label="Chip group list" > <li class="pf-v5-c-chip-group__list-item"> <div class="pf-v5-c-chip"> <span class="pf-v5-c-chip__content"> <span class="pf-v5-c-chip__text" id="select-multi-typeahead-invalid-chip_one" >Arkansas</span> </span> <span class="pf-v5-c-chip__actions"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-labelledby="remove_select-multi-typeahead-invalid_chip_one select-multi-typeahead-invalid-chip_two" aria-label="Remove" id="remove_select-multi-typeahead-invalid_chip_one" > <i class="fas fa-times" aria-hidden="true"></i> </button> </span> </div> </li> <li class="pf-v5-c-chip-group__list-item"> <div class="pf-v5-c-chip"> <span class="pf-v5-c-chip__content"> <span class="pf-v5-c-chip__text" id="select-multi-typeahead-invalid-chip_two" >Massachusetts</span> </span> <span class="pf-v5-c-chip__actions"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-labelledby="remove_select-multi-typeahead-invalid_chip_two select-multi-typeahead-invalid-chip_two" aria-label="Remove" id="remove_select-multi-typeahead-invalid_chip_two" > <i class="fas fa-times" aria-hidden="true"></i> </button> </span> </div> </li> <li class="pf-v5-c-chip-group__list-item"> <div class="pf-v5-c-chip"> <span class="pf-v5-c-chip__content"> <span class="pf-v5-c-chip__text" id="select-multi-typeahead-invalid-chip_three" >New Mexico</span> </span> <span class="pf-v5-c-chip__actions"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-labelledby="remove_select-multi-typeahead-invalid_chip_three select-multi-typeahead-invalid-chip_three" aria-label="Remove" id="remove_select-multi-typeahead-invalid_chip_three" > <i class="fas fa-times" aria-hidden="true"></i> </button> </span> </div> </li> <li class="pf-v5-c-chip-group__list-item"> <div class="pf-v5-c-chip"> <span class="pf-v5-c-chip__content"> <span class="pf-v5-c-chip__text" id="select-multi-typeahead-invalid-chip_four" >Ohio</span> </span> <span class="pf-v5-c-chip__actions"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-labelledby="remove_select-multi-typeahead-invalid_chip_four select-multi-typeahead-invalid-chip_four" aria-label="Remove" id="remove_select-multi-typeahead-invalid_chip_four" > <i class="fas fa-times" aria-hidden="true"></i> </button> </span> </div> </li> <li class="pf-v5-c-chip-group__list-item"> <div class="pf-v5-c-chip"> <span class="pf-v5-c-chip__content"> <span class="pf-v5-c-chip__text" id="select-multi-typeahead-invalid-chip_five" >Washington</span> </span> <span class="pf-v5-c-chip__actions"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-labelledby="remove_select-multi-typeahead-invalid_chip_five select-multi-typeahead-invalid-chip_five" aria-label="Remove" id="remove_select-multi-typeahead-invalid_chip_five" > <i class="fas fa-times" aria-hidden="true"></i> </button> </span> </div> </li> </ul> </div> </div> <span class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"> <input type="text" id="select-multi-typeahead-invalid-typeahead" aria-invalid="true" value="Invalid" aria-label="Type to filter" placeholder="Choose states" /> </span> </div> <span class="pf-v5-c-select__toggle-status-icon"> <i class="fas fa-exclamation-circle" aria-hidden="true"></i> </span> <button class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-clear" type="button" aria-label="Clear all" > <i class="fas fa-times-circle" aria-hidden="true"></i> </button> <button class="pf-v5-c-button pf-m-plain pf-v5-c-select__toggle-button" type="button" id="select-multi-typeahead-invalid-toggle" aria-haspopup="true" aria-expanded="true" aria-l