4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1609,--- title: Multi Select docs: - route: /docs/components/tag-node - route: /docs/components/select-editor --- ## Features Unlike traditional input-based multi-selects, this component is built on top of Plate editor, providing: - Full history support (undo/redo) - Native cursor navigation between and within tags - Select one to many tags - Copy/paste tags - Drag and drop to reorder tags - Read-only mode - Duplicate tags prevention - Create new tags with case insensitive matching - Search text cleanup and whitespace trimming - Fuzzy search powered by [cmdk](https://github.com/pacocoursey/cmdk) ## Manual Usage ### Installation ```bash npm install @platejs/tag ``` ### Add Plugins ```tsx import { MultiSelectPlugin } from '@platejs/tag/react'; import { createPlateEditor } from 'platejs/react'; const editor = createPlateEditor({ plugins: [ // ...otherPlugins, MultiSelectPlugin, // Multi-select editor with tag functionality ], }); ``` ### Configure Plugins ```tsx import { MultiSelectPlugin } from '@platejs/tag/react'; import { createPlateEditor } from 'platejs/react'; import { TagElement } from '@/components/ui/tag-node'; const editor = createPlateEditor({ plugins: [ // ...otherPlugins, MultiSelectPlugin.withComponent(TagElement), ], }); ``` - `MultiSelectPlugin`: Extends TagPlugin and constrains the editor to only contain tag elements - `withComponent`: Assigns [`TagElement`](/docs/components/tag-node) to render tag components ### Add SelectEditor ### Basic Example ```tsx import { MultiSelectPlugin } from '@platejs/tag/react'; import { TagElement } from '@/components/ui/tag-node'; import { SelectEditor, SelectEditorContent, SelectEditorInput, SelectEditorCombobox, type SelectItem, } from '@/components/ui/select-editor'; // Define your items const ITEMS: SelectItem[] = [ { value: 'React' }, { value: 'TypeScript' }, { value: 'JavaScript' }, ]; export default function MySelectEditor() { const [value, setValue] = React.useState([ITEMS[0]]); return ( ); } ``` ### Form Example ## Plugins ### TagPlugin Inline void element plugin for individual tag functionality. ### MultiSelectPlugin Extension of `TagPlugin` that constrains the editor to only contain tag elements, enabling multi-select behavior with automatic text cleanup and duplicate prevention. ## API ### tf.insert.tag Inserts new multi-select element at current selection. Properties for multi-select element. Unique value of multi-select element. ### getSelectedItems Gets all tag items in the editor. Array of tag items in editor. ### isEqualTags Utility function to compare two sets of tags for equality, ignoring order. New tags to compare against current editor tags. Whether both sets contain same values. ## Hooks ### useSelectedItems Hook to get the currently selected tag items in the editor. Array of selected tag items with values and properties. ### useSelectableItems Hook to get the available items that can be selected, filtered by search and excluding already selected items. Whether to allow creating new items. - **Default:** `true` Custom filter function for items. Array of available items. Filter function for new items. Position of new items in list. - **Default:** `'end'` Filtered array of selectable items. ### useSelectEditorCombobox Hook to handle combobox behavior in the editor, including text cleanup and item selection. Whether combobox is open. Function to select first combobox item. Callback when selected items change. ## Types ### TTagElement ```ts type TTagElement = TElement & { value: string; [key: string]: unknown; }; ``` ### TTagProps ```ts type TTagProps = { value: string; [key: string]: unknown; }; ```4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"../../content/docs/(plugins)/(functionality)/multi-select.mdx","content":"$50","type":"registry:file","target":"content/docs/plate/(plugins)/(functionality)/multi-select.mdx"}],"className":"h-[70svh] min-h-80"}]]}]