MultiSelect

Multi-value select — selected options render as removable chips. maxTagCount collapses overflow into a “+N” tag.

Tags

With overflow


import { MultiSelect } from '@gg-software/ui';
 
<MultiSelect
    label="Tags"
    placeholder="Select tags"
    options={options}
    value={selected}
    onChange={(values, options) => setSelected(values)}
/>
 
<MultiSelect label="With overflow" maxTagCount={2} options={options} />

Options use the same SelectOption shape as Select.

Props

Prop	Type	Default	Description
`options`*	`SelectOption<T>[]`	—
`value`	`T[]`	—
`defaultValue`	`T[]`	`[]`
`onChange`	`((value: T[], options: SelectOption<T>[]) => void)`	—
`placeholder`	`string`	`Select…`
`label`	`ReactNode`	—
`hint`	`ReactNode`	—
`error`	`ReactNode`	—
`required`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	`md`
`status`	`"warning" \| "error"`	—
`disabled`	`boolean`	`false`
`searchable`	`boolean`	`false`
`clearable`	`boolean`	`false`
`filterOption`	`((query: string, option: SelectOption<T>) => boolean)`	—
`emptyText`	`ReactNode`	`No options`
`maxTagCount`	`number`	—	show at most this many tags, then a "+N" overflow tag
`id`	`string`	—
`name`	`string`	—
`className`	`string`	—

* required · generated from packages/ui/src/input/MultiSelect/MultiSelect.tsx