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, shadow-vueda-control micro-shadow, dark-mode bg-input/30 tint. Flex-wrap with an 8px gap so committed TagsInputItem.root chips and the trailing 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

Slot	Default classes	Description
root	3 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, shadow-vueda-control micro-shadow, dark-mode bg-input/30 tint. Flex-wrap with an 8px gap so committed TagsInputItem.root chips and the trailing 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.

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, shadow-vueda-control micro-shadow, dark-mode bg-input/30 tint. Flex-wrap with an 8px gap so committed TagsInputItem.root chips and the trailing 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:

flex flex-wrap gap-2 items-center rounded-vueda-field hairline bg-background dark:bg-input/30 px-2 py-1 text-sm shadow-vueda-control transition-shadow
has-[input:focus-visible]:hairline-ring [&:has(input:focus-visible):not(:has([data-state=active]))]:focus-ring-shadow
aria-invalid:hairline-destructive [&[aria-invalid]:has(input:focus-visible):not(:has([data-state=active]))]:focus-ring-shadow-destructive

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