Tags Input

A field where each entry becomes a tag. Enter or a comma ends a tag, and the remove button or Backspace takes it out.

General

Name the field with aria-label, or with a label passed as children.

Controlled

Pass value and onChange to keep the tags in your own state. onChange receives the whole list.

Limit and duplicates

max ignores the tags past it. A tag already in the list is skipped, unless allowDuplicates is set.

Variants

Use filled, light, ghost or subtle with a type to change the surface of the field.

Error

error marks the field as invalid and shows errorMessage below it.

Disabled and read only

Both lock the field and the remove buttons.

APIs

TagsInput.Props

Attribute	Description	Type	Accepted values	Default
value	tags, to control the field	`string[]`	-	-
initialValue	tags on the first render	`string[]`	-	`[]`
onChange	called with the whole list when a tag is added or removed	`(tags: string[]) => void`	-	-
max	most tags the field holds; the next ones are ignored	`number`	-	-
allowDuplicates	accepts a tag that is already in the list	`boolean`	-	`false`
type	color of the field	`string`	`'default', 'primary', 'secondary', 'success', 'warning', 'error', 'info'`	`default`
rounded	rounded corners	`boolean`	-	`false`
filled	filled surface	`boolean`	-	`false`
light	light surface	`boolean`	-	`false`
ghost	ghost surface	`boolean`	-	`false`
subtle	subtle surface	`boolean`	-	`false`
disabled	locks the field	`boolean`	-	`false`
readOnly	shows the tags without changing them	`boolean`	-	`false`
error	marks the field as invalid	`boolean`	-	`false`
errorMessage	text shown below the field with `error`	`string`	-	-
...	native props, passed to the `input`	`InputHTMLAttributes`	`'placeholder', 'aria-label', 'id', ...`	-

Adding and removing tags

• Enter turns the text into a tag. With an empty field, Enter works as usual, so a form can still submit.
• A comma ends a tag, typed or pasted, so a, b, c becomes three tags.
• Leaving the field adds the text that is still in it.
• Backspace on an empty field removes the last tag, and each tag also has a remove button.
• Spaces around a tag are trimmed, and empty tags are ignored.

The field is a native text input, so a label passed as children, or aria-label, names it. Each remove button is named after its tag, like "Remove React", and sits in the tab order. error sets aria-invalid and links the message with aria-describedby.

Edit this page on GitHub