{ "name": "MultiSelect", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/MultiSelect.tsx", "chapterTag": "04 Forms & Inputs", "chapter": "05-forms-and-inputs.html", "sectionId": "multi-select", "elName": "MultiSelect", "demoUrl": "https://brand.magicblocks.ai/components/05-forms-and-inputs#multi-select", "hasLiveDemo": false, "description": "Multi-select with chip-rendered selections and a keyboard-navigable\npopover. Composes Combobox-style search with persistent multi-pick (no\nauto-close on select). Backspace at the empty input removes the last\nchip.", "useClient": true, "interactivity": "interactive", "namedExports": [ { "name": "MultiSelect", "isPrincipal": true, "isType": false }, { "name": "MultiSelectProps", "isPrincipal": false, "isType": true }, { "name": "MultiSelectOption", "isPrincipal": false, "isType": false } ], "importStatement": "import { MultiSelect } from \"@magicblocksai/ui\";", "props": [ { "name": "value", "optional": false, "type": "string[]", "doc": "Currently selected values." }, { "name": "onChange", "optional": false, "type": "(next: string[]) => void", "doc": "Fires whenever the selection set changes." }, { "name": "options", "optional": false, "type": "MultiSelectOption[]", "doc": "All options. The component filters in-memory by `label` substring when `searchable` (default `true`). For server-side filtering, recompute `options` in response to `onSearchChange`." }, { "name": "placeholder", "optional": true, "type": "string", "doc": "Placeholder shown when no values are selected." }, { "name": "disabled", "optional": true, "type": "boolean", "doc": "Disable input + popover." }, { "name": "maxChips", "optional": true, "type": "number", "doc": "When the chip count exceeds this, collapse the overflow into a `+N more` chip so the input doesn't grow unbounded. Default: no cap." }, { "name": "searchable", "optional": true, "type": "boolean", "doc": "Allow typing to filter the visible options. Default `true`." }, { "name": "onSearchChange", "optional": true, "type": "(query: string) => void", "doc": "Fires when the typed query changes — useful for server-side option resolution. The kit doesn't debounce; do it on your side if needed." }, { "name": "renderChip", "optional": true, "type": "( value: string, option: MultiSelectOption | undefined, onRemove: () => void, ) => ReactNode", "doc": "Render a custom chip for a selected value. Receives the value, its matching option (if any), and an `onRemove` callback." }, { "name": "renderOption", "optional": true, "type": "( option: MultiSelectOption, isSelected: boolean, isHighlighted: boolean, ) => ReactNode", "doc": "Render a custom row in the popover. Default renders label + sub + checkmark when selected." }, { "name": "maxPopoverHeight", "optional": true, "type": "number", "doc": "Maximum height of the option popover. Default `240px`." }, { "name": "closeOnSelect", "optional": true, "type": "boolean", "doc": "Disable closing the popover when an option is picked. Default `false` (kept open) — multi-select picking is iterative and auto-close is rarely what you want." }, { "name": "className", "optional": true, "type": "string", "doc": "Class on the wrapper." }, { "name": "id", "optional": true, "type": "string", "doc": "ID on the input (for label association)." }, { "name": "ariaLabel", "optional": true, "type": "string", "doc": "Accessible label when no `