TagsInputItem
Source: client/lib/theme/vueda-tailwind/controls/index.js
An individual committed chip inside a TagsInput.root. Pill radius (not the control / card radius the rest of the form family wears) marks the chip as a user-manipulated tag object rather than a slab-radius system badge or a chrome chit. Sized to
--vueda-chip-heightso multiple chips on a row share one baseline.data-state=active(set when the chip receives keyboard focus to edit or delete it) paints the standard focus ring on the chip, and the surrounding TagsInput.root suppresses its own ring on the same condition so only one ring paints at a time.
Vue component: TagsInputItem
| Slot | Default classes | Description |
|---|---|---|
| root | flex h-[var(--vueda-chip-height)] items-center rounded-vueda-pill bg-secondary data-[state=active]:focus-ring | An individual committed chip inside a TagsInput.root. Pill radius (not the control / card radius the rest of the form family wears) marks the chip as a user-manipulated tag object rather than a slab-radius system badge or a chrome chit. Sized to --vueda-chip-height so multiple chips on a row share one baseline. data-state=active (set when the chip receives keyboard focus to edit or delete it) paints the standard focus ring on the chip, and the surrounding TagsInput.root suppresses its own ring on the same condition so only one ring paints at a time. |
root
An individual committed chip inside a TagsInput.root. Pill radius (not the control / card radius the rest of the form family wears) marks the chip as a user-manipulated tag object rather than a slab-radius system badge or a chrome chit. Sized to
--vueda-chip-heightso multiple chips on a row share one baseline.data-state=active(set when the chip receives keyboard focus to edit or delete it) paints the standard focus ring on the chip, and the surrounding TagsInput.root suppresses its own ring on the same condition so only one ring paints at a time.
Default classes:
flex h-[var(--vueda-chip-height)] items-center rounded-vueda-pill bg-secondary data-[state=active]:focus-ring
Source: client/lib/theme/vueda-tailwind/controls/TagsInputItem.theme.js:18