Multi Selector @astryx-svelte/core v0.3.0 · MultiSelector
Usage
A checkbox dropdown for selecting multiple values from a list. Selected items can display as a count, labels, or badges. Use it for filtering or when presenting a finite set of options where multiple choices are needed.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Use for a moderate, finite set of options where multiple choices are needed. |
| Do | Enable search filtering when the list exceeds ~15 options. |
| Do | Use renderOption for custom option rows; the checkbox affordance remains owned by MultiSelector. |
| Do | Enable select-all when most users will want all or nearly all options selected. |
| Do | Use inside InputGroup only when the control needs a short prefix or suffix addon as part of one decorated input surface; prefer count or labels trigger display so the group stays single-line. |
| Do | Use variant="ghost" when a multi-selector sits in a toolbar with ghost buttons. If validation status is needed there, prefer statusVariant="tooltip" so the toolbar height stays compact. |
| Don't | Use for single-value selection; use Selector instead. |
| Don't | Show more than ~20 options without enabling search. |
| Don't | Wrap a disabled MultiSelector in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead. |
Examples
Common configurations, variations, and states.MultiSelector — Column Visibility
Column visibility toggle with hidden label, search, select-all, and selection count.
MultiSelector — Form Composition
Two multi-selectors in a form with required/optional states.
MultiSelector — Ghost Toolbar
Borderless MultiSelector variant composed with ghost buttons in a toolbar.
MultiSelector — Searchable
Multi-select with search filtering and select-all.
MultiSelector — Sectioned Permissions
Multi-select with options grouped into labeled sections.