Special/MultiSelect

MultiSelect

Token-based multi-select with animated chip entrance/exit, search filter, keyboard navigation (↑↓ Enter Backspace), and a +N overflow badge when too many items are selected.

import { MultiSelect } from "@animui/ui"

Basic

Frameworks

React

Selected: react

Keyboard shortcuts

↑ / ↓Navigate options

EnterToggle highlighted option

BackspaceRemove last token (when search is empty)

EscapeClose dropdown

Space / ArrowDownOpen dropdown

MultiSelectOption props

Prop	Type	Default	Description
`value`	`string`	—	Unique identifier for this option.
`label`	`string`	—	Display text.
`icon`	`ReactNode`	—	Optional icon shown in the token and option row.
`description`	`string`	—	Secondary line shown in the dropdown.
`disabled`	`boolean`	`false`	Makes this option unselectable.

Props

Prop	Type	Default	Description
`options`	`MultiSelectOption[]`	—	List of selectable options.
`value`	`string[]`	—	Controlled selected values.
`onChange`	`(values: string[]) => void`	—	Called when selection changes.
`placeholder`	`string`	`"Select options…"`	Shown when nothing is selected.
`searchPlaceholder`	`string`	`"Search…"`	Placeholder for the search input inside the dropdown.
`maxVisible`	`number`	—	Max tokens to show before a +N overflow badge.
`label`	`string`	—	Label text above the field.
`disabled`	`boolean`	`false`	Disable the entire field.
`noOptionsText`	`string`	`"No options found"`	Empty state text when search has no results.
`className`	`string`	—	Applied to the outer container.