Tags

A field that collects a list. Type, press Enter, and the text becomes a tag you can remove.

<TagsInput
  label="Ingredients"
  tagsPosition="outside"
  value={tags}
  onChange={setTags}
  placeholder="Type and press Enter"
/>

Two placements

Not a taste setting: they are two different jobs. Outside is what the design draws: the field stays one line forever and the list grows downward, so a form holding twenty tags does not reflow every time you add one. Inside puts them ahead of the caret, which reads as “these are the value” and is right when there will be three of them, not thirty.

Adding and removing

Enter or a comma commits; commitKeys changes that. Leaving the field commits too, because losing a half-typed tag to a click elsewhere is the most annoying bug this component can have. Backspace on an empty field removes the last tag , the one behaviour everybody tries and most implementations miss, and it is guarded on the field being empty so it never eats a tag while you are still typing one.

Duplicates are dropped silently rather than rejected loudly: you typed something already in the list, the list is already correct.

const [ingredients, setIngredients] = useState<string[]>([])

<TagsInput
  label="Ingredients"
  value={ingredients}
  onChange={setIngredients}
  validate={(tag) => tag.length <= 24}
  maxTags={12}
/>

Props

Shared

The same contract as every other field, with one difference: value, defaultValue and onChange work in string[] rather than string, because the value of this field is a list. Those three are in the table above; the rest are unchanged.