Tag Group

Source code

Click here View source code for Tag Group to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

To use the tag group as a field inside a Vee-Validate form, see VeeTagGroup.

Tag Group vs. Badge vs. Tags Input

Use a tag group for filters, choice chips and removable lists. Use a badge for a status that does nothing, and a tags input when users create the tags themselves.

Usage

The group renders a grid that needs an accessible name, so always pass an aria-label (or aria-labelledby). Set color, variant, size and shape on the group to style every tag at once, and override any of them on a single tag. The text of a tag is the default slot, which is also used for typeahead.

<template>
  <UiTagGroup v-model="selected" aria-label="Topics" selection-mode="multiple" color="indigo">
    <UiTagGroupItem value="vue" icon="logos:vue">Vue</UiTagGroupItem>
    <UiTagGroupItem value="nuxt" color="green" removable>Nuxt</UiTagGroupItem>
  </UiTagGroup>
</template>

Examples

Basic

A removable list. removable shows the remove button of a tag and the group emits remove with the values to delete. Focus a tag and press Delete or Backspace to remove it too.

Colors

There are 30 colors: primary, the full Tailwind palette (red to rose, slate, gray, zinc, neutral, stone and the newer taupe, mauve, mist and olive) and the error, warning and success aliases. Every color has light and dark styles. They are shared with UiBadge through ~/utils/badge-colors, which also exports the badgeColors array.

Variants

soft (default) is a tinted pill, solid is filled, outline only draws the border and modern is a neutral card where the color is used for the dot.

Sizes

Use size with sm, md (default) or lg.

Shapes

Use shape="pill" (default) or shape="rounded".

Icons

icon renders an icon before the text and trailing-icon one after it. For anything else use the leading and trailing slots.

Dots

The modern variant shows a colored dot by default. Add dot to show one on any other variant (an avatar or icon replaces the default dot of modern).

Avatars

Use avatar to show an image before the text.

Preview Code

Kelly King

Ryan Author

Mia Chen

Single selection

Set selection-mode="single" and bind a value with v-model. Selected tags show a check mark and a stronger ring. Press Escape to clear the selection, or add disallow-empty-selection to prevent it.

Multiple selection

With selection-mode="multiple" the v-model is an array. Space and Enter toggle the focused tag.

Add and remove

A tag group can be selectable and removable at once. When the focused tag is selected, Delete removes every selected tag.

Custom content

The leading, trailing and delete slots receive { selected, disabled }, so the content can react to the state of the tag.

Disabled

Disable the whole group with disabled, or single tags. Disabled tags are skipped by keyboard navigation.

Props

TagGroup

The group emits update:modelValue and remove. The slot receives modelValue.

TagGroupItem

The leading content is chosen in this order: check mark (when selected), dot, avatar, icon. The modern variant shows a dot by default, unless an avatar or icon is set.

TagGroupItemDelete

Accessibility

The group has the grid role (or group while it is empty) and every tag is a row. Focus moves with a roving tabindex, so the whole group is a single tab stop. Selected tags set aria-selected, and additions to the group are announced politely while it has focus.