Multi Select

Множественный выбор. Бесплатно, MIT · Формы и ввод › Выбор из списка

Установка

npx valyro-cli@latest add multi-select

npx shadcn@latest add https://valyro.xyz/r/multi-select.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { MultiSelect } from 'valyro-ui';

Пропсы

Prop	Type	Default
`options`	`SelectItem[]`		Options to pick from, flat or in labelled groups. Or compose them as children: `MultiSelect.Item`, `.Group`, `.Empty`.
`children`	`ReactNode`		The compound form instead of `options`: `MultiSelect.Item`, `MultiSelect.Group` and `MultiSelect.Empty` elements.
`value`	`string[]`		Selected values in the order they were picked.
`defaultValue`	`string[]`		Initial `value` when uncontrolled.
`onValueChange`	`(value: string[]) => void`		Called with the new `value` when it changes.
`open`	`boolean`		Controlled `open`; use with `onOpenChange`.
`defaultOpen`	`boolean`		Initial `open` when uncontrolled.
`onOpenChange`	`(open: boolean) => void`		Called with the new `open` when it changes.
`placeholder`	`string`	`'Select…'`	Field text while nothing is selected.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Field height and text size.
`invalid`	`boolean`	`false`	Error border and aria-invalid on the trigger (an explicit `aria-invalid` wins).
`searchable`	`boolean`	`false`	Adds a filter box at the top of the popover.
`searchPlaceholder`	`string`	`'Search…'`	Placeholder and accessible name of the filter box.
`maxChips`	`number \| 'auto'`	`2`	Chips shown in the field before collapsing the rest into "+N". `'auto'`: as many whole chips as the field's width holds (measured again when it resizes), so chips are never squeezed into a few letters.
`emptyText`	`ReactNode`		Shown in the popover when no option matches the filter or `options` is empty. Or `MultiSelect.Empty`.
`labels`	`Partial<MultiSelectLabels>`		Overrides for the built-in English text; keys left out keep their defaults.
`name`	`string`		Submits every selected value with the surrounding form (one hidden input per value).

Составные части

MultiSelect.Item (MultiSelectItem), MultiSelect.Group (MultiSelectGroup), MultiSelect.Empty (MultiSelectEmpty)

Multi Select

Установка

Пропсы

Составные части

Похожие компоненты