Multi Select
A fully accessible, token-driven MultiSelect component built with strict WAI-ARIA compliance.
tsx
import { MultiSelect } from '@nofinite/nui';Interactive Preview
Loading preview...
Usage
Basic Example
tsx
import { MultiSelect } from '@nofinite/nui';
<MultiSelect />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
options* | MultiSelectOption[] | — | Array of available options |
value | string[] | — | Controlled state for selected values |
defaultValue | string[] | — | Uncontrolled initial state for selected values |
onChange | ((value: string[]) => void) | — | Callback fired when the selection changes |
placeholder | string | Select multiple... | Text displayed when no options are selected |
name | string | — | Name attribute applied to hidden inputs for native form submission |
error | boolean | false | Toggles error styling |
maxTags | number | 3 | Number of tags to render before collapsing into a summary string (e.g., "3 selected") |
Accessibility & Guidelines
- Semantic Tokens: Built strictly using Nuicss semantic tokens (
bg-surface,text-default,border-subtle,bg-primary). - Keyboard Navigation: Adheres to strict WAI-ARIA standards.
- Screen Reader Support: Includes semantic roles and live regions where appropriate.