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

List item groups

The v-list-item-group provides the ability to create a group of selectable v-list-items. The v-list-item-group component utilizes v-item-group at its core to provide a clean interface for interactive lists.

Usage

By default, the v-list-item-group operates similarly to v-item-group. If a value is not provided, the group will provide a default based upon its index.

v-list-item-group/usage.vue

API

Examples

Props

Active class

You can set a class which will be added when an item is selected.

v-list-item-group/prop-active-class.vue

Mandatory

At least one item must be selected.

v-list-item-group/prop-mandatory.vue

Multiple

You can select multiple items at one time.

v-list-item-group/prop-multiple.vue

Misc

Flat list

You can easily disable the default highlighting of selected v-list-items. This creates a lower profile for a user’s choices.

v-list-item-group/misc-flat-list.vue

Selection controls

Using the default slot, you can access an items internal state and toggle it. Since the active property is a boolean, we use the true-value prop on the checkbox to link its state to the v-list-item.

v-list-item-group/misc-selection-controls.vue

Ready for more?

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