MultiSelect
API reference for the MultiSelect component
A multi-select list.
Works in controlled or uncontrolled mode. Pass value and onChange to own the selection state yourself; omit them to let the component manage it internally — starting with nothing selected. Use onSubmit to handle a final confirmation on Enter.
import { MultiSelect } from 'giggles/ui';
const toppings = [
{ label: 'Pepperoni', value: 'pepperoni' },
{ label: 'Mushrooms', value: 'mushrooms' },
{ label: 'Onions', value: 'onions' },
{ label: 'Olives', value: 'olives' },
];
// uncontrolled — no useState needed
function ToppingPicker() {
return <MultiSelect options={toppings} onSubmit={(selected) => saveOrder(selected)} />;
}
// controlled — caller owns selection state
function ControlledToppingPicker() {
const [selected, setSelected] = useState<string[]>([]);
return <MultiSelect options={toppings} value={selected} onChange={setSelected} />;
}Option values must be unique. Duplicate values will throw a GigglesError. Use primitive types (strings, numbers) for option values — items are matched using ===.
API Reference
MultiSelect
Prop
Type
Keybindings
| Key | Action |
|---|---|
j / ↓ | Highlight next (vertical) |
k / ↑ | Highlight previous (vertical) |
l / → | Highlight next (horizontal) |
h / ← | Highlight previous (horizontal) |
Space | Toggle highlighted item |
Enter | Fire onSubmit if provided |
Tab / Shift+Tab | Move to next/previous component |
MultiSelectRenderProps
Prop
Type
Examples
With submit
function FeaturePicker() {
const [features, setFeatures] = useState<string[]>([]);
return (
<MultiSelect
options={allFeatures}
value={features}
onChange={setFeatures}
onSubmit={(selected) => saveFeatures(selected)}
/>
);
}Custom render
<MultiSelect
options={options}
value={selected}
onChange={setSelected}
render={({ option, highlighted, selected }) => (
<Text color={highlighted ? 'cyan' : 'white'}>
{highlighted ? '>' : ' '} {selected ? '◉' : '○'} {option.label}
</Text>
)}
/>