# TagsInput (/docs/tags-input)
`TagsInput` collects free-form tags. Unlike [`MultiSelect`](/docs/multi-select) 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`](/docs/pill)-styled chip with a delete button.
```tsx
import { TagsInput } from '@42-central/ui-react/tags-input';
```
## Playground [#playground]
## Adding & removing [#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 [#limits--duplicates]
`maxTags` caps the count; `allowDuplicates` lets the same tag appear more than once (off by default).
## Max lines [#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 [#start--end-slots]
`startSlot` and `endSlot` place content at the field's inline-start / inline-end with the same slot layout as [`Input`](/docs/input). `endSlot` renders before the clear button.
## Testing tags [#testing-tags]
`testId` lands on the real typing ``. Each rendered tag additionally gets its own
`` `${testId}-tag-${index}` `` (0-indexed by rendered position, since tags are freeform strings
with no stable id of their own) — see the [Testing](/docs/testing) guide.
```tsx
// → input: data-testid="skills-input"
// → tags: data-testid="skills-input-tag-0", "skills-input-tag-1"
```
## Controlled [#controlled]
`value` is a `string[]`; `onChange` fires with the full list on every add, remove, or edit.
```tsx
'use client';
import { useState } from 'react';
import { TagsInput } from '@42-central/ui-react/tags-input';
export function Keywords() {
const [value, setValue] = useState([]);
return (
);
}
```
## Label, description & error [#label-description--error]
Built-in via [`Field`](/docs/field):
## API [#api]
## Accessibility [#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"`.