This is the Vuetify 3 documentation, examples and information may be broken or outdated.

Chip groups

The v-chip-group supercharges the v-chip component by providing groupable functionality. It is used for creating groups of selections using chips.

Usage

Chip groups make it easy for users to select filtering options for more complex implementations. By default v-chip-group will overflow to the right but can be changed to a column only mode.

API

Examples

Props

Column

Chip groups with column prop can wrap their chips.

v-chip-group/prop-column.vue

Filter results

Easily create chip groups that provide additional feedback with the filter prop. This creates an alternative visual style that communicates to the user that the chip is selected.

v-chip-group/prop-filter.vue

Mandatory

Chip groups with mandatory prop must always have a value selected.

v-chip-group/prop-mandatory.vue

Multiple

Chip groups with multiple prop can have many values selected.

v-chip-group/prop-multiple.vue

Misc

Product card

The v-chip component can have an explicit value used for its model. This gets passed to the v-chip-group component and is useful for when you don’t want to use the chips index as their values.

v-chip-group/misc-product-card.vue

Toothbrush card

Chip groups allow the creation of custom interfaces that perform the same actions as an item group or radio controls, but are stylistically different.

v-chip-group/misc-toothbrush-card.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.