Tag & token input with delimiters, validation, paste-splitting, editable/removable/draggable tags and live suggestions.
<link rel="stylesheet" href="https://cdn.get-set.it/gs-tags/latest/gs-tags.min.css"> <script src="https://cdn.get-set.it/gs-tags/latest/gs-tags.min.js"></script>
import Tags from '@get-set/gs-tags'; export default function App() { return ( <Tags> <div className="content">Your Tags content</div> </Tags> ); }
| Option | Type | Default | Description |
|---|---|---|---|
| reference | string | none | Reference. |
| value | string[] | none | Initial tags. Native accepts this to seed the control. Default: []. |
| placeholder | string | '' | Placeholder shown in the text input while empty. |
| maxTags | number | false | false | Maximum number of tags. `false`/undefined = unlimited. |
| allowDuplicates | boolean | false | Allow the same value more than once. Default: false. |
| delimiters | GSTagsDelimiter[] | none | Which keys / actions commit the pending text. Default: ['enter', 'comma']. Include 'paste' to split pasted text. |
| pasteSplit | RegExp | string | none | Regex/string used to split pasted (and 'paste'-delimited) text into multiple tags. Default: /[,\n;]+/ (comma, newline, semicolon). |
| validate | GSTagsValidator | none | Validate a candidate before it becomes a tag (regex | string | fn). |
| allowedPattern | RegExp | string | none | Characters allowed while typing. Disallowed keystrokes are blocked. Accepts a RegExp tested per character, or a string compiled to one. |
| transform | GSTagsTransform | GSTagsTransform[] | none | Case / whitespace normalisation applied before committing. |
| editableTags | boolean | false | Double-click a tag to edit it inline. Default: false. |
| removable | boolean | true | Render an × remove button on each tag. Default: true. |
| draggable | boolean | false | Drag tags to reorder them. Default: false. |
| backspaceRemoves | boolean | true | Clear the last tag with Backspace on an empty input. Default: true. |
| addOnBlur | boolean | false | Add the pending tag when the input loses focus. Default: false. |
| suggestions | GSTagsSuggestionsSource | none | Static array or async resolver for the autocomplete dropdown. |
| minChars | number | 0 | Minimum query length before suggestions are requested. Default: 0. |
| restrictToSuggestions | boolean | false | Only allow values that exist in the suggestions list. Default: false. |
| maxSuggestions | number | 8 | Cap the number of suggestions shown. Default: 8. |
| hideSelectedSuggestions | boolean | true | Hide already-selected values from the dropdown. Default: true. |
| suggestionDebounce | number | 200 | Debounce (ms) applied to async suggestion queries. Default: 200. |
| disabled | boolean | false | Disable all interaction. Default: false. |
| readOnly | boolean | false | Tags visible but not editable (no add/remove/reorder). Default: false. |
| autofocus | boolean | false | Auto-focus the input on mount. Default: false. |
| name | string | none | Name used for the hidden input(s) so the control submits in a form. |
| theme | GSTagsTheme | 'auto' | Visual theme. `auto` follows prefers-color-scheme. Default: 'auto'. |
| accentColor | string | none | Accent color (CSS var --gst-accent). |
| size | GSTagsSize | 'md' | Control size preset. Default: 'md'. |
| rtl | boolean | false | Right-to-left layout. Default: false. |
| reducedMotion | 'auto' | boolean | 'auto' | Honor prefers-reduced-motion. 'auto' | true | false. Default: 'auto'. |
| customClass | GSTagsCustomClass | none | Per-part class overrides. |
| className | string | none | Extra class name applied to the root element. |
Split on comma, enter or custom keys.
Regex / callback rules with duplicate guard.
Reorder tokens by dragging.
Autocomplete tags from a source list.