# Tag input

A text input that turns what you type into printed tags. Enter or a comma sets one down in the well; each tag is a key that takes itself away, and every change is spoken.

Kit part · With the Kit · https://tactileui.dev/parts/tag-input

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

A well like the combo’s, whose tags are the kit’s keys scaled to fit it. The element builds its tags from a list, and a list is all it holds. A pasted list is split on commas, semicolons and line breaks. Leaving the field commits what is typed, so nothing is lost silently.

## Variants

- Empty · the placeholder
- With tags
- At the limit
- Error
- Disabled

## States

- Rest
- Tag hover
- Tag pressed
- Tag focus
- Typing
- Disabled

## Props and options

| Name | Kind | Description |
| - | - | - |
| disabled | attribute | Stops typing and removing. |
| values | property | Read or set the list. |
| change | event | After tags are added or removed. Bubbles. The inner input’s own change is not passed on. |
| tagSplit(text) · tagSays(…) | function | The rules, pure: split a pasted list, refuse duplicates (case aside) and overflow, and say what happened. |
| Enter · , | keyboard | Add the tag. Enter with nothing typed submits the form as usual. |
| Backspace · ← | keyboard | Backspace on an empty input removes the last tag; ← at the start moves to the last tag. |
| ← → · Home · End · Backspace · Delete | keyboard | Move between tags and back to the input; remove the one you are on. |

## Usage notes

Type a word and press Enter or a comma. Backspace on an empty input removes the last; ← reaches the tags; a click takes one away. Paste a list.

## Accessibility

- Each tag is a real button whose name says what it does (“Remove print”) and clicking, Enter or Space on it removes it.
- Every change is spoken in a polite live region: what was added, what was removed, how many tags there are now, and what was refused (“print is already there”, “the limit is 3”).
- Only the input is in the tab order, so a long list is not a long Tab; ← from the start of the input, or Home and End on a tag, reach the tags.
- A refused duplicate nudges the tag that is already there. With reduced motion it presses down instead, and the live region says it either way.
- Tags keep the case they were typed in.

## Related parts

- [Field](https://tactileui.dev/parts/field): Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
- [Tag](https://tactileui.dev/parts/tag): A small printed plate: a type, a count, a badge. Solid for the one tag that must stand out.
- [Combo](https://tactileui.dev/parts/combo): One field with its one action in a shared well: subscribe, search, add.