Choose several values from a known list. The dropdown keeps a compact summary and search inside its panel; the tokenizer presentation puts removable values beside an editable query and manages overflow explicitly.
Open the dropdown, search and toggle up to three regions. The menu stays open after selection; the field stays one row high and summarizes additional values.
Unfocused tokens occupy one row with a measured +N more count. Activate that count to inspect and remove all six values inline; Show less collapses the set. At the selection limit the query reserves no width.
Open and search. An unmatched query produces no results; “offline” simulates failure with Retry. The host owns requests and rejects stale responses.
| Example | Axis / state | Usage |
|---|---|---|
|
Small | Compact dropdown size. |
|
Medium | Default dropdown size. |
|
Large | Larger dropdown size. |
|
Invalid | Field validation is separate from retrieval failure. |
|
Read-only | Committed values remain visible; changes are unavailable. |
|
Disabled | Committed values remain visible; actions leave the tab order. |
| Verdict | Rule |
|---|---|
| Do | Use Multi select for several known values. Use its dropdown presentation for choice from a list and tokenizer presentation for editable set building. |
| Do | Give the dropdown trigger or tokenizer input a visible field label; separately name the search input inside a dropdown panel. |
| Do | Keep query, highlight and committed values separate. Explicit activation toggles an option and keeps the panel open; Escape, Tab and outside dismissal discard only the query. |
| Do | Keep DOM focus on the input during option navigation; aria-activedescendant references one visible available option. |
| Do | Keep disabled options visible, skip them during keyboard navigation and guard pointer activation. |
| Do | Keep the panel open during loading or retrieval failure. Preserve results for context but block stale-option commits. The host cancels or discards outdated async responses. |
| Do | Announce loading, result count, no matches and failure through one polite status region. Field validation uses aria-invalid and aria-describedby independently. |
| Do | Keep native text editing and IME composition. Enter during composition never selects or submits. |
| Do | Keep the dropdown one row high and show a selected label plus additional count. Tokenizer collapses to one row with a named +N more button; reveal every hidden token for inspection and removal. Clear removes all values; required checks the collection. |
| Do | Flip above when the viewport has more room there, retain anchor width and cap scrolling to available space. Re-evaluate on scroll and resize; a containing modal owns outer focus confinement. |
| Do | Keep embedded hover ink-only; do not apply a standalone ghost Button hover plate inside the bordered control. |
| Do | Keep values distinct and preserve their order. A nonnegative integer maxSelected bounds additions; reaching the limit must leave selected values removable. External values are preserved even when above a changed limit. |
| Do | Align token label ink with the empty field text rail: equal space.1 field insets plus space.2 token label inset. Measure overflow against the available lane and preserve action hit targets; never clip a token as the only overflow indication. |
| Don't | Do not accept arbitrary typed text as a value in this contract. Free-text token creation requires an explicit separate contract. |
| Don't | Do not put action buttons inside options or listboxes; feedback and retry are siblings of the listbox. |
Menu actions choose an attribute; its values live in a named searchable panel with native Checkbox controls. The shared adapter owns placement, surface, row geometry and dismissal. The product owns available fields, counts and filtering logic.