Multi Selector
A multiple selector component built with shadcn/ui. Supports searching, tagging, and multi-value selection with an accessible and customizable design for modern React apps.
Thanks to Sersavan
Selected Frameworks:
- nextjs
- svelte
Installation
npx uilayouts@latest add multi-selector
Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | { label: string; value: string; icon?: React.ComponentType; disable?: boolean; }[] | [] | An array of option objects displayed in the multi-select. Each object has a label, value, optional icon, and optional disable flag. |
onValueChange | (value: string[]) => void | undefined | Callback triggered when the selected values change. Receives an array of selected values. |
defaultValue | string[] | [] | The default selected values when the component mounts. |
placeholder | string | "Select options" | Text displayed when no values are selected. |
animation | number | 0 | Duration of animation effects (in seconds) for visual feedback like bouncing badges. |
maxCount | number | 3 | Maximum number of items to display before summarizing the rest. |
modalPopover | boolean | false | Enables modal behavior for the popover, disabling interaction with outside elements and enhancing accessibility for screen readers. |
asChild | boolean | false | Renders the multi-select as a child element of another component. |
className | string | undefined | Additional CSS classes for custom styling of the multi-select component. |
popoverClass | string | undefined | Additional CSS classes for custom styling of the popover content. |
showall | boolean | false | Option to display all items without truncating the list, regardless of the maxCount setting. |
ref | React.RefObject<HTMLButtonElement> | undefined | A React ref object for the root element of the multi-select component, allowing for external access to the component’s DOM node. |