Components

Chip

Interactive filters, tags, and inputs with UiChip and UiChipGroup.

UiChip renders a single tappable chip. UiChipGroup renders a set of chips from an options array and manages selection with v-model — use it for filters and tag pickers. For static status labels, use UiBadge instead.

Single-select filter chips

In single mode, modelValue is string | null. Clicking the selected chip deselects it.

<script setup lang="ts">
import { ref } from 'vue'

const status = ref<string | null>(null)
const options = [
  { id: 'active', text: 'Active' },
  { id: 'paused', text: 'Paused' },
  { id: 'archived', text: 'Archived' },
]
</script>

<template>
  <UiChipGroup v-model="status" :options="options" aria-label="Filter by status" />
</template>

Multi-select chips

Set multiple to model a string[].

<script setup lang="ts">
import { ref } from 'vue'

const tags = ref<string[]>([])
const options = [
  { id: 'vue', text: 'Vue', iconCode: '&#xe86f;' },
  { id: 'nuxt', text: 'Nuxt' },
  { id: 'ts', text: 'TypeScript' },
]
</script>

<template>
  <UiChipGroup v-model="tags" :options="options" multiple aria-label="Filter by tag" />
</template>

Set closable on an option to render a trailing remove button. UiChipGroup emits remove with the option id — you own the removal logic.

<script setup lang="ts">
import { ref } from 'vue'

const tags = ref([
  { id: '1', text: 'Design', closable: true },
  { id: '2', text: 'Frontend', closable: true },
])

function onRemove(id: string) {
  tags.value = tags.value.filter(tag => tag.id !== id)
}
</script>

<template>
  <UiChipGroup :options="tags" @remove="onRemove" />
</template>

Use UiChip directly

<template>
  <UiChip text="Filter chip" icon-code="&#xe152;" @click="onClick" />
  <UiChip text="Selected" selected />
  <UiChip text="Disabled" disabled />
  <UiChip text="Removable" closable close-label="Remove tag" @remove="onRemove" />
</template>

UiChip props

Prop	Type	Default	Description
`id`	`string \| null`	—	Unique identifier for the chip.
`text`	`string \| null`	—	Display text label.
`iconCode`	`string \| null`	—	Leading Material Symbols code point. Replaced by a check mark while `selected`.
`selected`	`boolean`	`false`	Renders the filter-chip active state and swaps the leading icon for a check mark.
`disabled`	`boolean`	`false`	Disables the chip.
`closable`	`boolean`	`false`	Renders a trailing remove button (input-chip behavior).
`textOnly`	`boolean`	`false`	Renders the borderless text-only chip variant.
`closeLabel`	`string`	`'Remove'`	Accessible label for the remove button.
`customClass`	`string \| string[] \| Record<string, boolean> \| null`	—	Extra classes.

Emits: click (MouseEvent) when the chip body is clicked; remove when the trailing remove button of a closable chip is clicked.

Slots: default renders after the text (e.g. a trailing badge), in addition to text.

UiChipGroup props

Prop	Type	Default	Description
`options`	`IChipOption[]`	—	Chip options: `{ id, text, iconCode?, disabled?, closable? }`.
`modelValue`	`string \| string[] \| null`	—	Selected id (single) or ids (multiple).
`multiple`	`boolean`	`false`	Allows selecting multiple chips.
`ariaLabel`	`string \| null`	—	ARIA label describing the group.
`customClass`	`string \| string[] \| Record<string, boolean> \| null`	—	Extra classes for the group container.

Emits: update:modelValue when the selection changes; remove with the option id when a closable option's remove button is clicked.

UiChipGroup renders a role="group" container. In single-select mode, clicking the currently selected chip clears the selection (sets modelValue to null).

Edit this pageorReport an issue

Divider

Separate content with UiDivider — horizontal, labelled, or vertical.

Stepper

Guide users through a sequence of steps with UiStepper.