Tags Component

Component Status

| Component | Status | | --------- | ----------------------------------------------------------- | | TagGroup | | | Tags | |

Tags for categorizing, filtering, dismissing, or selecting content. Use Tags for a single tag, or TagGroup to manage a set of related, selectable tags.

Installation

pnpm add @phila/phila-ui-tags @phila/phila-ui-core
# or
npm install @phila/phila-ui-tags @phila/phila-ui-core

Import core styles in your main entry file (e.g., main.js|ts):

import "@phila/phila-ui-core/styles/template-light.css";

Usage

Tags (standalone)

<script setup lang="ts">
import { Tags } from "@phila/phila-ui-tags";
</script>

<template>
  <Tags text="Open" variant="action" color="blue" />
  <Tags text="Read-only label" variant="readonly" color="grey" />
  <Tags text="Filter: Parks" variant="dismissible" color="green" @dismiss="removeFilter" />
</template>

TagGroup (recommended for multiple related tags)

<script setup lang="ts">
import { TagGroup } from "@phila/phila-ui-tags";
import { ref } from "vue";

const selected = ref<Array<string | number>>([]);
const choices = [
  { text: "Parks", value: "parks" },
  { text: "Libraries", value: "libraries" },
  { text: "Schools", value: "schools" },
];
</script>

<template>
  <TagGroup groupLabel="Filter by category" :choices="choices" v-model="selected" />
</template>

Variants

Only variant on Tags changes behavior, not just appearance:

| Variant | Behavior on click | Notes | | ------------- | ------------------------------------------------- | -------------------------------------------------- | | action | Toggles selected and emits update:selected | Default. Renders aria-pressed. | | readonly | Not interactive (tabindex="-1", no hover state) | Use for display-only tags (e.g. inside MapCard). | | dismissible | Emits dismiss (does not toggle selected) | Renders a trailing close icon instead of icon. |

TagGroup's variant is TagGroupVariant — "action" | "readonly" only; dismissible doesn't make sense for a managed group and isn't accepted there.

Colors

TagColor: blue, purple, grey, orange, green, yellow, red, white.

Tags Props

| Prop | Type | Default | Description | | -------------- | --------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------- | | text | string | — | Tag label (alternative to the default slot). | | variant | TagVariant | "action" | "action" \| "readonly" \| "dismissible" — see Variants. | | size | ComponentSize | "medium" | "extra-small" \| "small" \| "medium" \| "large" \| "extra-large" \| "xxsmall". | | color | TagColor | "blue" | See Colors. | | selected | boolean | false | Selected/active state (action variant only). | | icon | IconComponent | — | Leading icon, from @phila/phila-ui-core/icons. Ignored for dismissible (a close icon is always shown instead, trailing). | | trailingIcon | Component | — | Trailing icon (non-dismissible variants). | | className | string | — | Additional CSS classes. |

Tags Events

| Event | Payload | Description | | ----------------- | ------------ | ---------------------------------------------- | | click | MouseEvent | Emitted on every click, regardless of variant. | | update:selected | boolean | Emitted when an action tag is toggled. | | dismiss | — | Emitted when a dismissible tag is clicked. |

TagGroup Props

| Prop | Type | Default | Description | | ------------- | ------------------------- | ---------- | --------------------------------------------------------------------------------------- | | choices | TagGroupChoice[] | — | { text, value, color?, icon? }[] — color/icon override the group default per-tag. | | modelValue | Array<string \| number> | — | Selected values (use with v-model). | | groupLabel | string | — | Label displayed above the group. | | description | string | — | Optional helper text below the label. | | variant | TagGroupVariant | "action" | "action" \| "readonly". | | size | ComponentSize | "medium" | Applied to every tag in the group. | | color | TagColor | "blue" | Default color for every tag; overridable per-choice. | | multiple | boolean | true | When false, selecting one choice clears the others (radio-like). | | className | string | — | Additional CSS classes. |

TagGroup Events

| Event | Payload | Description | | ------------------- | ------------------------- | ---------------------------------------- | | update:modelValue | Array<string \| number> | Emitted with the full updated selection. |

Development

Install Dependencies

pnpm install

Run Demo

pnpm dev

Build Library

pnpm build

Type Check

pnpm type-check

Publishing to NPM

Follow the release instructions using changesets.

License

MIT