Selection

Chip group

Single or multiple selection, mandatory and max rules, and one tab stop — standalone chips still work.

Playground

Configure the component and copy synchronized Vue code.

Properties

Direction

Content

Multiple

Mandatory

Wrap

Vue

<m-chip-group
  v-model="filter"
  aria-label="Status"
>
  <m-chip type="filter" value="all">All</m-chip>
  <m-chip type="filter" value="active">Active</m-chip>
  <m-chip type="filter" value="archived">Archived</m-chip>
</m-chip-group>

Token map

The manual manifest combines inherited token owners with local deltas.

Search tokens

MChipGroup · All2 tokens

md-chip-group

MChipGroup API

Props, slots, and events are generated from the current public kit contract.

MChipGroup

Selection family

src/runtime/components/ui/chip-group

Props

NameTypeDefault

itemsOptional data-driven items rendered through the `#item` slot.

readonly unknown[]undefined

itemValueResolve each item's selection value (key or getter).

string | ((item: unknown, index: number) => unknown)undefined

itemDisabledResolve each item's disabled state (key or getter).

string | ((item: unknown, index: number) => boolean)undefined

itemKeyResolve a stable v-for key (key or getter).

string | ((item: unknown, index: number) => PropertyKey)undefined

multipleAllow multiple selection.

booleanfalse

mandatoryEnforce at least one selection; `'force'` also auto-selects the first.

boolean | 'force'false

disabledDisable every registered chip in the group.

booleanfalse

maxMaximum concurrent selections (multiple mode only).

numberundefined

directionLayout flow; also maps the arrow keys.

'horizontal' | 'vertical''horizontal'

wrapWrap chips onto multiple lines instead of scrolling natively.

booleantrue

valueComparatorCustom value equality (defaults to `===`).

(left: unknown, right: unknown) => booleanundefined

Slots

Events

MChipGroup does not emit component-specific events. Native events fall through to its root element.