Vuance UI Kit

Selection field

Dropdown

Single or multiple selection in a field you can read at rest — chips, a limit, and a panel you may replace entirely.

Reviewers are notified once the pull request opens

v-modelundefined

Semantics

The combobox pattern, wired to a real input rather than to a div that pretends to be one.

  • The input is the combobox

    role="combobox" sits on the real input with aria-expanded, aria-controls and aria-activedescendant. Screen readers get one control, not a focusable wrapper with an unnamed field inside it.

  • The panel is a listbox

    role="listbox" with aria-multiselectable in multiple mode; every row is an option carrying aria-selected.

  • Virtual focus

    Real focus never leaves the field. Rows are pointed at with aria-activedescendant and are not tab stops.

  • Blocked rows announce themselves

    A row you cannot pick — disabled in the data, or blocked by max — carries aria-disabled and is skipped by the arrows.

  • The label names the field

    The label prop wires for/id through the text field. With labelPlacement="hidden" it is still there for assistive tech.

Keyboard, and a way to check it

Focus the field on the left and press a key: the binding that claims it lights up. If a row does not light up, the map is wrong — that is the point.

Reviewers are notified once the pull request opens

v-modelundefined

Focus the field and press a key — the matching row lights up

  • ArrowDownArrowUp

    Open, then move

    Closed, either arrow opens the panel on the current value. Open, they walk the rows and skip everything disabled.

    field

  • Enter

    Pick the active row

    Opens a closed panel; chooses the active row when open. Single mode closes after, multiple keeps collecting.

    field

  • Space

    Same as Enter

    A select has no text to type, so Space belongs to selection here. In the autocomplete it stays a character.

    field

  • HomeEnd

    First and last row

    Jumps to either end of the list while the panel is open.

    panel open

  • Escape

    Close, keep the value

    Closes the panel without changing the selection.

    panel open

  • Tab

    Close and leave

    Closes the panel and lets focus continue to the next control.

    panel open

  • ArrowLeftArrowRight

    Walk into the chips

    With multiple selection, ArrowLeft steps back into the chips; ArrowRight walks out again.

    multiple

  • BackspaceDelete

    Remove a chip

    Deletes the focused chip, or the last one when no chip is focused. Mandatory keeps the final value.

    multiple