Skip to main content

​
Usage

The VChipGroup component provides a container for organizing VChip components with selection functionality. 
<template>
  <v-chip-group v-model="selection">
    <v-chip>Option 1</v-chip>
    <v-chip>Option 2</v-chip>
    <v-chip>Option 3</v-chip>
  </v-chip-group>
</template>

<script setup>
import { ref } from 'vue'
const selection = ref(null)
</script>

​
Multiple Selection

Allow selecting multiple chips: 
<template>
  <v-chip-group
    v-model="selection"
    multiple
  >
    <v-chip>Red</v-chip>
    <v-chip>Green</v-chip>
    <v-chip>Blue</v-chip>
    <v-chip>Yellow</v-chip>
  </v-chip-group>
</template>

<script setup>
import { ref } from 'vue'
const selection = ref([])
</script>

​
Mandatory Selection

Require at least one chip to be selected: 
<template>
  <v-chip-group
    v-model="selection"
    mandatory
  >
    <v-chip>Small</v-chip>
    <v-chip>Medium</v-chip>
    <v-chip>Large</v-chip>
  </v-chip-group>
</template>

​
Filter Style

Use filter chips with checkmark icons: 
<template>
  <v-chip-group
    v-model="selection"
    filter
    multiple
  >
    <v-chip>Red</v-chip>
    <v-chip>Green</v-chip>
    <v-chip>Blue</v-chip>
  </v-chip-group>
</template>

​
Column Layout

Stack chips vertically: 
<template>
  <v-chip-group column>
    <v-chip>Chip 1</v-chip>
    <v-chip>Chip 2</v-chip>
    <v-chip>Chip 3</v-chip>
  </v-chip-group>
</template>

​
Custom Colors

Apply colors to all chips in the group: 
<template>
  <v-chip-group
    v-model="selection"
    color="primary"
    variant="elevated"
  >
    <v-chip>Chip 1</v-chip>
    <v-chip>Chip 2</v-chip>
    <v-chip>Chip 3</v-chip>
  </v-chip-group>
</template>

​
Props

​
modelValue
any
The v-model value of the selected chip(s)
​
multiple
boolean
default:"false"
Allows multiple chip selections
​
mandatory
boolean | 'force'
default:"false"
Forces at least one chip to always be selected
​
max
number
Maximum number of chips that can be selected (when multiple is enabled)
​
filter
boolean
default:"false"
Displays a checkmark icon on selected filter chips
​
column
boolean
default:"false"
Displays chips in a vertical column instead of horizontal row
​
color
string
Applies specified color to selected chips
​
baseColor
string
Base color applied to all chips in the group
​
variant
string
default:"tonal"
Visual variant applied to chips. Options: elevated, flat, tonal, outlined, text, plain
​
disabled
boolean
default:"false"
Disables all chips in the group
​
selectedClass
string
default:"v-chip--selected"
CSS class applied to selected chips
​
showArrows
boolean | string
Shows navigation arrows when chips overflow. Values: true, false, ‘always’, ‘desktop’, ‘mobile’
​
centerActive
boolean
default:"false"
Centers the active chip when selected
​
scrollToActive
boolean
default:"false"
Automatically scrolls to the active chip
​
nextIcon
IconValue
default:"$next"
Icon for next navigation arrow
​
prevIcon
IconValue
default:"$prev"
Icon for previous navigation arrow
​
theme
string
Specify a theme for this component and all of its children
​
tag
string
default:"div"
Specify a custom tag used on the root element

​
Slots

​
default
slot
The default slot for chip components

​
Events

​
update:modelValue
event
Emitted when the selection changes
VChipGroup extends VSlideGroup, providing scrolling and overflow behavior when chips don’t fit in the container.
When using the filter prop with multiple selection, selected chips display a checkmark icon to indicate their selected state.

Build docs developers (and LLMs) love

Get started for freeTalk to us