TagsInput

TagsInput collects free-form tags. Unlike MultiSelect there's no fixed option list — the user types and presses Enter (or a delimiter) to mint a tag. It's built on Ark UI's dedicated TagsInput machine, and each tag renders as a Pill-styled chip with a delete button.

import { TagsInput } from '@42/ui-react/tags-input';

<TagsInput defaultValue={['c', 'unix']} placeholder="Add a skill…" />

Playground

<Component placeholder="Add a skill…" size="md" />

Adding & removing

Type and press Enter or a delimiter (, by default — set splitChars) to add a tag. Pasting adds tags too (addOnPaste). Remove with a tag's ×, Backspace on the empty field, or the clear button (clearable). Tags are editable — double-click one to edit it in place.

Limits & duplicates

maxTags caps the count; allowDuplicates lets the same tag appear more than once (off by default).

Max lines

maxLines caps the visible tags at N rows; any beyond collapse into a static +N counter. The hidden tags stay in the value and submit normally — there's no inline reveal, so reach for this when the field would otherwise grow unbounded.

Start & end slots

startSlot and endSlot place content at the field's inline-start / inline-end with the same slot layout as Input. endSlot renders before the clear button.

import { Hash } from 'lucide-react';<TagsInputdefaultValue={['c', 'unix']}startSlot={<Hash />}placeholder="Add a skill…"/>

Controlled

value is a string[]; onChange fires with the full list on every add, remove, or edit.

'use client';
import { useState } from 'react';
import { TagsInput } from '@42/ui-react/tags-input';

export function Keywords() {
  const [value, setValue] = useState<string[]>([]);
  return (
    <TagsInput
      value={value}
      onChange={setValue}
      placeholder="Add keywords"
      clearable
    />
  );
}

Label, description & error

Built-in via Field:

<TagsInputlabel="Skills"description="Press Enter to add"defaultValue={['c']}/>

API

Accessibility

• Full TagsInput keyboard model from Ark: Enter / delimiter adds, Backspace removes the last tag from the empty field, ← / → move between tags, Enter on a tag edits it, Esc cancels an edit.
• Each tag's delete is a labelled button; the field announces additions, deletions, and edits; label / description / error are associated via the built-in Field.
• A hidden input backs form submission; pass name.
• RTL: tags, field, and clear button mirror under dir="rtl".