Multi Select
Select multiple options from a dropdown list, shown as dismissible chips in the trigger — extends the same option/keyboard model as ZyraSelect.
Choose frameworks…
API
All inputs and configuration options for zyra-multi-select.
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | 'Select options' | Text shown when nothing is selected |
size | 'sm' | 'md' | 'lg' | 'md' | Height and font scale |
appearance | 'outline' | 'filled' | 'underline' | 'outline' | Visual style of the trigger |
maxChips | number | 3 | Maximum chips shown before collapsing into "+N more" |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Panel uses role="listbox" with aria-multiselectable="true"
- Trigger is a div with role="button" (not <button>) since chip dismiss buttons nest inside it
- Arrow keys navigate options; Enter/Space toggles; Escape closes; Tab dismisses
- Each chip's dismiss button is independently focusable and keyboard-operable