Multiple Select
Live example
Multiple Select
Installation
npx shadcn@latest add https://hextech-ui.vercel.app/r/multiple-select.jsonAPI reference
These are the main Multiple Select options. See the exported TypeScript types for inherited native or primitive props.
| Prop | Type | Default |
|---|---|---|
label | string (required) | — |
options | readonly T[] | required |
getOptionKey / itemToStringLabel | identity and display getters | string/id/value + label |
value / defaultValue | readonly T[] | — |
renderOption / renderValue | custom option / chip content | — |
isOptionDisabled | (option: T) => boolean | — |
emptyState / emptySelection | ReactNode | no matches / — |
size | small | medium | large | medium |
clearOnEscape | boolean; closed Escape clears only when enabled | false |
Object records
Use stable getOptionKey values and readable itemToStringLabel text for object options. Own selections with value and onValueChange, or seed local state with defaultValue. Use isOptionDisabled for unavailable choices and keep the label visible.