---
url: "https://vueda.dev/v3/reference/theming/keys/TagsInput.md"
title: "TagsInput"
---

# TagsInput

Source: `client/lib/theme/vueda-tailwind/controls/index.js`

> The outer shell of a multi-value input that captures discrete entries as pill chips. Reads as the input family: `hairline` border, control radius, dark-mode `bg-input/30` tint. Flex-wrap with an 8px gap so committed [TagsInputItem.root](/v3/reference/theming/keys/TagsInputItem.md#theme-key-TagsInputItem-root) chips and the trailing [TagsInputInput.root](/v3/reference/theming/keys/TagsInputInput.md#theme-key-TagsInputInput-root) flow onto new rows as the chip count grows. Focus and `aria-invalid` rings fire on the shell (not the inner input) via `:has(input:focus-visible)` and `:has([data-state=active])` selectors: typing in the field paints the standard focus ring on the shell; focusing a committed chip (`data-state=active`) suppresses the shell ring so the chip's own active outline is the only one visible at a time.

Vue component: [TagsInput](/v3/reference/api/vue/TagsInput.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/TagsInput.md#theme-key-TagsInput-root) | 5 classes | The outer shell of a multi-value input that captures discrete entries as pill chips. Reads as the input family: `hairline` border, control radius, dark-mode `bg-input/30` tint. Flex-wrap with an 8px gap so committed [TagsInputItem.root](/v3/reference/theming/keys/TagsInputItem.md#theme-key-TagsInputItem-root) chips and the trailing [TagsInputInput.root](/v3/reference/theming/keys/TagsInputInput.md#theme-key-TagsInputInput-root) flow onto new rows as the chip count grows. Focus and `aria-invalid` rings fire on the shell (not the inner input) via `:has(input:focus-visible)` and `:has([data-state=active])` selectors: typing in the field paints the standard focus ring on the shell; focusing a committed chip (`data-state=active`) suppresses the shell ring so the chip's own active outline is the only one visible at a time. |

<a id="theme-key-TagsInput-root"></a>

## root

> The outer shell of a multi-value input that captures discrete entries as pill chips. Reads as the input family: `hairline` border, control radius, dark-mode `bg-input/30` tint. Flex-wrap with an 8px gap so committed [TagsInputItem.root](/v3/reference/theming/keys/TagsInputItem.md#theme-key-TagsInputItem-root) chips and the trailing [TagsInputInput.root](/v3/reference/theming/keys/TagsInputInput.md#theme-key-TagsInputInput-root) flow onto new rows as the chip count grows. Focus and `aria-invalid` rings fire on the shell (not the inner input) via `:has(input:focus-visible)` and `:has([data-state=active])` selectors: typing in the field paints the standard focus ring on the shell; focusing a committed chip (`data-state=active`) suppresses the shell ring so the chip's own active outline is the only one visible at a time.

Default classes:

```text
flex flex-wrap gap-2 items-center rounded-vueda-field field-line bg-field hover:bg-field-hover px-2 py-1 text-sm transition-shadow
data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed
data-[disabled]:bg-disabled data-[disabled]:text-disabled-foreground data-[disabled]:hairline-border
has-[input:focus-visible]:hairline-ring [&:has(input:focus-visible):not(:has([data-state=active]))]:focus-ring-shadow
data-[warning=true]:not-aria-invalid:hairline-warning aria-invalid:hairline-destructive aria-invalid:has-[input:focus-visible]:hairline-destructive [&[aria-invalid=true]:has(input:focus-visible):not(:has([data-state=active]))]:focus-ring-shadow-destructive
```

Source: `client/lib/theme/vueda-tailwind/controls/TagsInput.theme.js:18`