Coverage areas
One or more
Search the available places and keep the ones the project covers.
Multi-select
Selects multiple predefined options from a searchable native disclosure with named checkboxes.
Preview
In action
When to use
Use it for
- Multiple values from a known option set.
- A compact summary that expands to filterable checkbox choices.
Not for
- Freeform values; use TagInput.
- One option only; use Select or NativeSelect.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { MultiSelect } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/multi-select.
2. Vendor the source
npx @noorddev/vlak-cli add multi-select
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/multi-select.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { MultiSelect } from "@noorddev/vlak-react";
<MultiSelect label="Cities" name="cities" options={[{ value: "alkmaar", label: "Alkmaar" }, { value: "bergen", label: "Bergen" }, { value: "castricum", label: "Castricum" }]} defaultValue={["alkmaar"]} />Props
MultiSelect
A native disclosure containing named checkboxes; selections remain visible when collapsed.
| Prop | Type | Default | Description |
|---|---|---|---|
optionsrequired | MultiSelectOption[] | ||
value | string[] | ||
defaultValue | string[] | [] | |
onValueChange | (value: string[]) => void | ||
label | ReactNode | "Options" | |
placeholder | string | "Select options" | |
searchable | boolean | true | |
searchLabel | string | "Filter options" | |
emptyLabel | ReactNode | "No matching options" | |
clearLabel | string | "Clear selection" |
Also accepts Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "defaultValue">.
Keyboard
| Keys | Does |
|---|---|
| Enter, Space | Opens or closes the native summary, or toggles the focused checkbox. |
| Tab | Moves through search, available checkboxes, and clear selection. |
| Escape | Closes the disclosure and returns focus to its summary. |
Accessibility
- Uses native details and checkboxes instead of exposing an incomplete listbox interaction.
- The legend names the field; each checkbox has its own visible name. Selected rows change fill across the full surface.
- Disabled options cannot change; clear preserves disabled selections. Empty search results are announced politely.
- With name, selected values are submitted as repeated fields. The ref reaches the fieldset; uncontrolled selections reset with the form.
Markup
<fieldset class="rs-multi-select"><legend class="rs-multi-select-legend">Cities</legend><details><summary class="rs-multi-select-trigger">Select options</summary><div class="rs-multi-select-panel"><label class="rs-multi-select-option"><input type="checkbox" name="cities" value="alkmaar" /> Alkmaar</label><label class="rs-multi-select-option"><input type="checkbox" name="cities" value="bergen" /> Bergen</label></div></details></fieldset>
Classes
.rs-multi-select.rs-multi-select-legend.rs-multi-select-trigger.rs-multi-select-panel.rs-multi-select-options.rs-multi-select-option.rs-multi-select-selected.rs-multi-select-empty.rs-multi-select-clear