# Tag Input

Tag entry where what you type turns into a chip right where it is. Chips reflow smoothly as they’re added or removed, and a duplicate tag flickers its existing chip.

> Composed · Free · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add tag-input
```

## Import

```tsx
import { TagInput } from "@/components/ui/tag-input/tag-input";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `string[]` | Controlled tag list. Omit for uncontrolled via `defaultValue`. |
| `defaultValue?` | `string[]` | Uncontrolled initial tags. |
| `onChange?` | `(tags: string[]) => void` | Fires with the next tag list on every add/remove. |
| `label?` | `string` | Visible label above the field. |
| `placeholder?` | `string` | Placeholder inside the field — shown only while the tag list is empty. |
| `maxTags?` | `number` | Cap on tag count — commits past it are refused with a flicker. |
| `separators?` | `string[]` | Characters that commit a tag on top of Enter. Default [",", " "]. |
| `onReject?` | `(tag: string, reason: TagRejectReason) => void` | Called when a commit is rejected (duplicate or over maxTags). |
| `disabled?` | `boolean` | Locks the field — chips lose their ×, typing is disabled. |
| `className?` | `string` | Classes on the outer wrapper. |
| `fieldClassName?` | `string` | Classes on the field box itself. |
| `inputClassName?` | `string` | Classes on the inner TextInput. |
| `chipClassName?` | `string` | Classes merged onto every rendered chip. |
| `counter?` | `boolean` | Show an "n of max" line under the field (needs `maxTags`); an  over-limit commit flickers this line instead of the field. |

Source: https://lumioui.com/components/tag-input