Search
Search components and blocks
Multi Select
ProA searchable dropdown that keeps several choices. Picked options become chips in the trigger that slide in and out on one line and can be removed with their own X (or Backspace on the closed field); extras beyond maxVisible fold into a +N chip. The list stays open while you pick, shows a live selected count that rolls to each new number, and has a Select all / Clear all shortcut.
Props
options{ value: string; label: string }[]—valuestring[]—defaultValuestring[][]onValueChange(value: string[]) => void—placeholderstring"Select options..."searchPlaceholderstring"Search..."emptyTextstring"No results found."maxVisiblenumber2openboolean—defaultOpenbooleanfalseonOpenChange(open: boolean) => void—classNamestring—Multi Select Blur
ProA second variety of Multi Select. The list blurs into focus as it opens over a frosted-glass panel, and the options melt in one by one. Checkboxes draw their tick, labels nudge when picked, and chips blur in and out of the trigger with a spinning remove button. The trigger glows while open, and the footer has a rolling count, Clear, and a Done button that closes the list.
Props
options{ value: string; label: string }[]—valuestring[]—defaultValuestring[][]onValueChange(value: string[]) => void—placeholderstring"Select options..."searchPlaceholderstring"Search..."emptyTextstring"No results found."maxVisiblenumber2openboolean—defaultOpenbooleanfalseonOpenChange(open: boolean) => void—classNamestring—When to use the multi select
Use it when people choose several options from a searchable list. Picked options become chips in the trigger.
Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.