tag-group

Tag Group

Tags the shopper moves through with the arrow keys, such as active filters to remove or options to pick; selection and removal are both optional.

States: Default, Hover, Focus, Checked, Disabled

Parts

PartFileDoes
TagGroupTagGroup.vueGroups tags the user moves through with the arrow keys, and can select or remove.
TagGroupItemTagGroupItem.vueOne tag: its text and, when removable, a delete button.
TagGroupItemDeleteTagGroupItemDelete.vueLets the user remove its tag; the group emits `remove`.
TagGroupItemTextTagGroupItemText.vueShows the text of one tag.

Anatomy

<TagGroup>
  <TagGroupItem>
    <TagGroupItemText />
    <TagGroupItemDelete />
  </TagGroupItem>
</TagGroup>

Styling

PartRecipe
TagGrouptag-group
TagGroupItemtag-group-item
TagGroupItemDeletetag-group-item-delete

Install

Writes 5 files into components/ui/tag-group/. For agents, npx @frontic/ui docs tag-group prints this reference as markdown; the MCP server serves the same.

npm packages
@lucide/vue
@vueuse/core
reka-ui

API reference

TagGroup TagGroup.vue

Groups tags the user moves through with the arrow keys, and can select or remove. Renders a <div>.

PropTypeDefault
modelValueAcceptableValue | AcceptableValue[]—
defaultValueAcceptableValue | AcceptableValue[]—
selectionModeTagGroupSelectionMode'none'
disallowEmptySelectionbooleanfalse
escapeKeyBehavior'none' | 'clearSelection''clearSelection'
disabledbooleanfalse
dirDirection—
loopbooleantrue
bystring | ((a: AcceptableValue, b: AcceptableValue) => boolean)—
asChildbooleanfalse
asAsTag | Component'div'
classClassValue—
EventPayload
update:modelValuevalue: AcceptableValue | AcceptableValue[] | undefined
removevalues: AcceptableValue[]
SlotSlot props
default{ modelValue: AcceptableValue | AcceptableValue[] | undefined; }
Data attributeValues
data-disabled—
data-empty—
Recipe tag-groupSets
base: tag-group 4 properties

TagGroupItem TagGroupItem.vue

TagGroupItemDelete TagGroupItemDelete.vue

TagGroupItemText TagGroupItemText.vue

Example
State