TagInput – Once UI

TagInput holds an array rather than a string. Each entry renders as a chip that can be removed on its own, and typing a new one appends to the array.

TagInput

React

Next.js

Enter

const [tags, setTags] = useState<string[]>(["React", "Next.js"]);

<TagInput
  id="interests"
  value={tags}
  onChange={setTags}
  placeholder="Add interest"
  suffix={<Kbd position="absolute" top="12" right="12">Enter</Kbd>}
/>

Uncontrolled

Leave out value and the input keeps its own list, starting from defaultValue. onChange still receives every new array.

Uncontrolled

Topics

Design

Code

<TagInput
  id="topics"
  label="Topics"
  defaultValue={["Design", "Code"]}
/>

size="xxs" starts the field at 32px, the height of a size="s" Button. It grows as chips are added, like every size.

Toolbar size

React

Next.js

const [tags, setTags] = useState<string[]>(["React", "Next.js"]);

<TagInput
  id="interests"
  placeholder="Add interest"
  size="xxs"
  value={tags}
  onChange={setTags}
/>

Keyboard and screen readers

The tags are a list, each with a remove button named after its tag. Backspace in an empty field removes the last tag, and a polite live region says which; after a remove button is used, focus goes back to the field. labels translates the button names and the announcement.

Translated

Themen

Design

Code

<TagInput
  id="themen"
  label="Themen"
  defaultValue={["Design", "Code"]}
  labels={{
    remove: (tag) => `${tag} entfernen`,
    removed: (tag) => `${tag} entfernt`,
  }}
/>

API reference

	Type	Default
value The tags, as an array of strings, controlled. Leave it out and the input keeps its own list.	string[]	—
defaultValue The starting tags when `value` is left out.	readonly string[]	—
onChange Receives the whole new array, after an add or a remove.	(value: string[]) => void	—
labels The remove buttons' names and the removal announcement, to translate them.	TagInputLabels	—
…and every InputProps prop	inherited	—

Everything on Input — label, description, error, size, prefix, suffix — works here too.