MultiSelect
Several choices from a known list, such as labels or channels. For free text that becomes tags, use ChipInput.
- MultiSelect
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, MultiSelect
Labels
NotifyChoose at least one label.
Dark theme, MultiSelect
Labels
NotifyChoose at least one label.
High contrast theme, MultiSelect
Labels
NotifyChoose at least one label.
UsageLink to the section Usage
import { MultiSelect } from '@skribly/ui/forms'<MultiSelect label="Labels" items={labels}
formatSelection={(names) => names.length > 2 ? `${names.length} labels` : names.join(', ')} />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- The list stays open while choosing; Space or Enter toggles an option and Escape closes.
- Each row shows a check box glyph as well as the selected state React Aria announces.
- The trigger text is cut with an ellipsis, so give formatSelection a count for long choices.
This demo runs through axe in all three themes on every test run. See what the tests check.