Skip to content

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 ​

ComponentDescription
v-chip-groupPrimary component

Examples ​

Props ​

Column ​

Chip groups with column prop can wrap their chips.

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.

Mandatory ​

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

Multiple ​

Chip groups with multiple prop can have many values selected.

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.

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.

Reddit style categories ​

Use a combination of utility classes and emojis to create a Reddit-style category selection.

Released under the MIT License.