# Tag input

> Type, paste or pick suggestions to add tags; validates each one.

Component · Free · https://lodeui.com/components/tag-input

## When to use

- Lists of short values: emails to invite, labels, allowed domains.

## When not to use

- Picking from a fixed list: use a multi combobox.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/tag-input.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { TagInput } from "@/components/ui/tag-input";

export function Invite() {
  const [emails, setEmails] = React.useState<string[]>([]);
  return (
    <TagInput
      aria-label="Emails"
      value={emails}
      onValueChange={setEmails}
      placeholder="name@company.com"
      validate={(t) => (/^\S+@\S+$/.test(t) ? null : "Enter a valid email")}
      max={10}
    />
  );
}
```

## API reference

### TagInput

Type and press Enter or comma to add a tag. Paste splits on commas.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / onValueChange | `string[]` | – | Controlled tags. |
| validate | `(tag) => string \| null` | – | Return an error message to reject a tag. |
| max | `number` | – | Most tags allowed. |
| suggestions | `string[]` | `[]` | Up to five matches shown as a listbox while typing. |
| placeholder | `string` | `"Add…"` | Input placeholder. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / , | Add the tag |
| Backspace | Remove the last tag when empty |
| Tab | Reach suggestions and remove buttons |

## Accessibility

- Each tag's remove button is labelled "Remove <tag>".
- Errors are announced with role="alert" and aria-invalid.

## Motion

- Tags spring in and out (stiffness 500).

## Responsive behavior

- Tags wrap onto new lines.

## Performance

- Duplicates are ignored without re-rendering.

## Notes for AI

- Normalize case in validate if tags are case-insensitive.

## Related

- [Combobox](https://lodeui.com/components/combobox) — Searchable select for one or many values, fully keyboard driven.
- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.