Multi-select
Multi-value selector with filtering, a compact selection summary, removable chips, and clear-all.
Included in the single kansho full pack. Components are not offered as separate installs.
Permission scopes
- read:runs
- write:runs
- read:fleet
Empty state
Component documentation
Multi Select
components/inputs/multi-select.tsxPurpose
Selects multiple filtered options and displays the current selection as chips or a summary.
Appropriate use
Use for bounded multi-value choices such as permission scopes or tags.
Example
components/inputs/multi-select.tsx has a representative live example in the "Permission scopes" section on /components/multi-select.
States
Supports empty and populated selection, filtered and empty results, error status, removable chips below the trigger, a compact selection summary, and clear-all.
API and props
MultiSelect accepts value, onChange, options, placeholder, emptyLabel, emptyHint, status, inlineChips, id, ARIA labelling props, and className.
Dependencies
React, Radix Popover, cmdk, Lucide icons, Field, and the Kansho cn utility.
Accessibility
Exposes an aria-multiselectable command list, forwards labelling and validation attributes, and preserves keyboard navigation through cmdk.
Limitations
It does not virtualize large datasets or create custom values; inlineChips suppresses the external chip row rather than moving chips into the popup, and option values must be provided by the caller.
Source
Source: components/inputs/multi-select.tsx.
Full pack
components/inputs/multi-select.tsx is documented at /components/multi-select and installs only through the single Kansho full pack; no individual component install is offered.