TagsInput

Press Enter to add a tag and Backspace to remove the last one. The machine manages editing, navigation, and hidden form values.

import { TagsInput } from '@manti-ui/react';

export default function TagsInputBasic() {
  return (
    <div className="w-full max-w-[calc(var(--manti-space-16)*7)]">
      <TagsInput
        label="Fillings"
        variant="primary"
        defaultValue={['lamb', 'onion', 'pepper']}
        placeholder="Add a filling…"
      />
    </div>
  );
}

State and limits

Use max, invalid, disabled, readOnly, and required as needed.

Default

lambonion

Invalid

lambonion

Up to 3 tags

lambonion

API

Prop	Type	Default	Description
`label`	`ReactNode`	—	Optional field label.
`variant`	`MantiVariant`	`'primary'`	Focus-ring variant.
`value`	`string[]`	—	Controlled tag values.
`defaultValue`	`string[]`	—	Initial tag values for uncontrolled usage.
`onValueChange`	`(value: string[]) => void`	—	Called whenever the tag set changes.
`max`	`number`	—	Maximum number of tags.
`allowDuplicates`	`boolean`	—	Allow duplicate tags.
`addOnPaste`	`boolean`	—	Add a tag when pasting delimited text.
`placeholder`	`string`	—	Placeholder for the entry input.
`disabled / readOnly / invalid / required`	`boolean`	—	Field state flags.
`name`	`string`	—	Form field name.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="tags-input"][data-part="root"]`	The component container.
`label`	`[data-scope="tags-input"][data-part="label"]`	The optional label.
`control`	`[data-scope="tags-input"][data-part="control"]`	The chips-and-input frame.
`item-preview`	`[data-scope="tags-input"][data-part="item-preview"]`	A rendered tag chip.
`item-delete-trigger`	`[data-scope="tags-input"][data-part="item-delete-trigger"]`	The remove button on a chip.
`item-input`	`[data-scope="tags-input"][data-part="item-input"]`	The inline edit input for a chip.
`input`	`[data-scope="tags-input"][data-part="input"]`	The entry input for new tags.

Tokens

Token	Controls
`--manti-tags-input-height`	height

Last updated 13 September 2026