Vibe UI
Initializing Vibe UI System...
Vibe UI

Multi-Select

A premium cascading nested selector with expandable categories, tag search, selection badges, and both multi-select & single-select modes.

Multi-Select

A premium cascading nested selector with expandable categories, tag search, selection badges, and both multi-select & single-select modes.

A highly interactive cascading selector component. It allows users to browse hierarchical options through collapsible category groups, perform search query filtering, clear selections easily, and view selected items as tags inside the trigger.

Preview

Installation

pnpm dlx vibe-ui-kit@latest add multi-select badge checkbox label
💡 Vibe UI Component Dependencies: This component requires other components to work correctlyPlease make sure you also install these Vibe UI component dependencies: badge, checkbox, label

Themes

Explore design variant presets for the Multi-Select component side-by-side.

Default
Glassmorphism
Brutalist Retro
Neon Glow

Single Selection Mode

By passing mode="single", the component automatically transforms into a single-select dropdown using radio selection buttons while keeping the cascading sub-category structure.

Hierarchical Nested Options

You can nest MultiSelectGroup components inside other groups to render a multi-level folder/tree hierarchy. The indentation padding adjusts automatically.

Props

MultiSelect

PropTypeDefaultDescription
valuestring[]-Controlled value array representing currently selected option identifiers.
defaultValuestring[][]Initial selected option values when used uncontrolled.
onValueChange(values: string[]) => void-Event callback triggered when selections are added, removed, or cleared.
variant'default' | 'glass' | 'retro' | 'glow''default'The visual design theme preset applied to the trigger and dropdown content.
mode'multi' | 'single''multi'Selection behavior mode (multi-select badges vs single-select radio).

MultiSelectTrigger

PropTypeDefaultDescription
placeholderstring'Select options...'Placeholder text rendered when no items are selected.
maxVisibleTagsnumber2Maximum number of selected item tag badges to display before collapsing into +N more label.

MultiSelectContent

PropTypeDefaultDescription
showSearchbooleanfalseWhen true, renders a live search filter input at the top of the dropdown menu.

MultiSelectGroup

PropTypeDefaultDescription
headingstring-Header title string for the expandable category group.
defaultExpandedbooleanfalseWhether the category group should be expanded by default on mount.
valuesstring[][]Array of item values belonging to this category for batch check/uncheck.

MultiSelectItem

PropTypeDefaultDescription
valuestring-Unique value identifier for the option.
keywordsstring[]-Optional search keywords to match against search query filter.

Contributors

JS
Jenish Sabhadiya

Theme Customizer

8px
@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}
Changes apply instantly to this documentation workspace.
Multi Select | Vibe UI