TagInput

Token input for entering a list of tags with delimiters, validation, and suggestions.

TagInput collects a list of free-form tags. It is controlled — value is a string[] and onChange fires on every add or remove. A tag commits on Enter or whenever the typed text matches the delimiter regex (comma, semicolon, newline, or tab by default), Backspace on an empty field removes the last tag, and duplicates are ignored. Cap the count with maxTags, reject entries with a validate callback, and offer suggestions that surface while typing.

Example

Preview

reactrouter

import { TagInput } from '@officina/ui';
import { useState } from 'react';

function Example() {
  const [tags, setTags] = useState<string[]>(['design']);
  return (
    <TagInput
      value={tags}
      onChange={setTags}
      placeholder="Add a tag…"
      suggestions={['design', 'engineering', 'product']}
    />
  );
}

API

Prop	Type	Default	Description
onChange*	(value: string[]) => void	—	Called with the updated tag list on add/remove.
value*	string[]	—	Current list of tags.
delimiter	RegExp	/[,;\n\t]/	Pattern that splits typed input into tags (e.g. comma/space).
disabled	boolean	—
invalid	boolean	—	Marks the field invalid for validation styling and `aria-invalid`.
maxTags	number	—	Maximum number of tags allowed.
name	string	—	Form field name, for native form submission / form libraries.
placeholder	string	—
required	boolean	—	Marks the field as required for validation styling and `aria-required`.
suggestions	string[]	[]	Autocomplete suggestions offered while typing.
validate	(tag: string) => string \| null	—	Validate a candidate tag; return an error string to reject it.

Example

API

On this page