Astryx Design System

Multi Selector@astryxdesign/core v0.0.15 · 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
import {MultiSelector} from '@astryxdesign/core/MultiSelector'

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.
Don't	Use for single-value selection; use Selector instead.
Don't	Show more than ~20 options without enabling search.

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 — Searchable

Multi-select with search filtering and select-all.

MultiSelector — Sectioned Permissions

Multi-select with options grouped into labeled sections.