MultiSelect
A dropdown component for selecting multiple options.
MultiSelect is a dropdown component for selecting multiple values at once. Selected values are shown as removable tags in the trigger button.
import { MultiSelect } from "@/components/multi-select";
<Field name="Checks" description="Visibility filters">
<MultiSelect
value={
[data.team_check && "team", data.dead_check && "dead"].filter(
Boolean,
) as string[]
}
onChange={(checks) =>
set({
...data,
team_check: checks.includes("team"),
dead_check: checks.includes("dead"),
})
}
options={[
{ value: "team", label: "Team Check" },
{ value: "dead", label: "Dead Check" },
]}
placeholder="Select checks..."
/>
</Field>;Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string[] | — | Controlled array of selected values |
onChange | (value: string[]) => void | — | Called with the full updated array when a value is toggled |
options | MultiSelectOption[] | — | List of options to display |
placeholder | string | "Select..." | Text shown when nothing is selected |
disabled | boolean | false | Disables the dropdown |
maxDisplay | number | 2 | Max number of tags to show before collapsing into +N more |
MultiSelectOption
| Field | Type | Description |
|---|---|---|
value | string | The value included in the selected array |
label | string | The text displayed in the dropdown and as the tag label |
Mapping to Boolean Fields
Since the C++ config uses individual boolean fields rather than an array, you need to map between the two when using MultiSelect. Convert your booleans to an array for value and convert the array back to booleans in onChange:
value={
[data.team_check && "team", data.dead_check && "dead"].filter(
Boolean,
) as string[]
}
onChange={(checks) =>
set({
...data,
team_check: checks.includes("team"),
dead_check: checks.includes("dead"),
})
}