Components

Tag input

A token field — a flex-wrap box styled like .ds-input that holds removable tokens followed by a text entry. Enter or a comma adds a token, Backspace on an empty field removes the last, and each token's × removes it.

Anatomy

A .ds-tag-input box wraps a row of .ds-tag-input__token pills (each with a .ds-tag-input__remove ×) and a borderless .ds-tag-input__field. The box owns the focus ring via :focus-within.

Tokens + input

Pricing Margin Discount

<div class="ds-tag-input">
  <span class="ds-tag-input__token">Pricing
    <button class="ds-tag-input__remove" type="button" aria-label="Remove Pricing" tabindex="-1">×</button>
  </span>
  <span class="ds-tag-input__token">Margin
    <button class="ds-tag-input__remove" type="button" aria-label="Remove Margin" tabindex="-1">×</button>
  </span>
  <input class="ds-tag-input__field" type="text" placeholder="Add tag…">
</div>

Interactive

Type a tag and press Enter or comma to add it; press Backspace in the empty field to drop the last token; click a × to remove one. The small inline script below wires this demo (no dependencies).

Add & remove

<div class="ds-tag-input" data-tag-input>
  <input class="ds-tag-input__field" type="text" placeholder="Add tag…" data-tag-input-field>
</div>
<!-- Enter / comma adds a token · Backspace on empty removes the last -->

React

The TagInput takes a string[] value — controlled (value) or uncontrolled (defaultValue). Enter or comma adds the current text, Backspace on the empty field removes the last token, and each × removes its token.

import { TagInput } from "@diametral/design-system/react";

<TagInput
  placeholder="Add tag…"
  defaultValue={["Pricing", "Margin"]}
  onChange={(tags) => setTags(tags)}
/>