Tag Input
Multi-value text input where each entry becomes a removable tag. Confirm tags with Enter or comma. Paste a comma-separated list to add multiple at once.
Examples
designsystem
Press Enter or comma to add.
Controlled
ReactTypeScript
2 tags: React, TypeScript
With max
bugurgent
Maximum 3 labels.
Sizes
tag
tag
tag
Props
value
string[]
Controlled tag list.
defaultValue= []
string[]
Initial tags for uncontrolled usage.
onChange
(tags: string[]) => void
Called when tags change.
delimiters= ['Enter', ',']
string[]
Keys that confirm a new tag.
placeholder= 'Add tag…'
string
Input placeholder when no tags are present.
max
number
Maximum number of tags. Hides the input when reached.
validate
(tag: string) => boolean
Called before adding a tag — return false to reject.
size= 'md'
'sm' | 'md' | 'lg'
Height and text size.
label
string
Label above the input.
hint
string
Helper text below.
error= false
boolean
Error border and hint colour.
disabled= false
boolean
Disables all interaction.
className
string
Additional classes on the wrapper.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string[] | — | Controlled tag list. |
| defaultValue | string[] | [] | Initial tags for uncontrolled usage. |
| onChange | (tags: string[]) => void | — | Called when tags change. |
| delimiters | string[] | ['Enter', ','] | Keys that confirm a new tag. |
| placeholder | string | 'Add tag…' | Input placeholder when no tags are present. |
| max | number | — | Maximum number of tags. Hides the input when reached. |
| validate | (tag: string) => boolean | — | Called before adding a tag — return false to reject. |
| size | 'sm' | 'md' | 'lg' | 'md' | Height and text size. |
| label | string | — | Label above the input. |
| hint | string | — | Helper text below. |
| error | boolean | false | Error border and hint colour. |
| disabled | boolean | false | Disables all interaction. |
| className | string | — | Additional classes on the wrapper. |