Components · Forms

MultiSelect

Pick several values from a list. Chips sit in the field, a checklist opens below, and typing filters it. Backspace removes the last chip.

jsx

import { MultiSelect } from '@andeus/ui';

With colour and a cap

HoldingsUp to 4

jsx

const [holdings, setHoldings] = useState(['SPY', 'QQQ']);

<MultiSelect label="Holdings" hint="Up to 4" max={4} value={holdings} onChange={setHoldings}
  options={[
    { value: 'SPY', label: 'SPY', color: 'var(--screen-yellow)' },
    { value: 'QQQ', label: 'QQQ', color: 'var(--screen-blue)' },
    'TLT', 'GLD', 'BIL'
  ]} />

Empty and error

Props

Prop	Type	Default
options	`Array<string \| { value, label, color?, hint? }>`	Required
value	`string[]`	[]	Controlled with onChange; or pass defaultValue / defaultChecked.
label	`string \| ReactNode`	—	Printed under the field.
hint	`string`	—
error	`string`	—
placeholder	`string`	'Choose'
max	`number`	—	Caps the picks and disables the rest.
searchable	`boolean`	true	Type to filter.
size	`'s' \| 'm' \| 'l'`	'm'
disabled	`boolean`	false

PreviousSelect NextCheckbox