Live demo — this example is server-driven; run the showcase locally for the interactive version.

Select

Composition pattern — Menu toggle + Menu with the toggle label tracking the chosen value. For native <select> styling see Form select.

Examples

Single select

Dropdown tracking one chosen value in the toggle.

Select option variants

Descriptions, icons, disabled, and selected-with-check options.

With grouped items

Titled menu groups inside the select.

Compute


Network

With validation

Danger toggle + error helper until a value is chosen, then success.

You must select a state.

Checkbox select

Multi-select via checkbox options.

Typeahead

Typing filters the options; selecting fills the input.

  • No results found

Typeahead with create option

No match offers Create "<query>".

Multiple typeahead with labels

Selections render as removable labels inside the toggle.

Multiple typeahead with create option

Labels plus creatable entries.

Multiple typeahead with checkboxes

Checkbox options with a selected-count badge.

With view more

A pf-m-load item reveals the remaining options.

A link action in pf-v6-c-menu__footer.

Documentation

Select pattern

Select is composition — same structure as Dropdown but with role="listbox" on the menu and role="option" on each item. For multi-select use role="menuitemcheckbox" + checkbox markup inside each item.

Usage

Form select vs. Select. Native Form select for small static lists; this richer Select when you need search, custom rendering, or multi-select.