Vuetify — Chip Groups

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Chip Groups

We can group chips together with the v-chip-group component.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-sheet elevation="10" class="pa-4">
          <v-chip-group column active-class="primary--text">
            <v-chip v-for="tag in tags" :key="tag">{{ tag }}</v-chip>
          </v-chip-group>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    tags: ["mango", "apple", "orange", "pear", "grape"],
  }),
};
</script>

We put the v-chip components in the v-chip-group component.

Mandatory

We can add the mandatory prop so that there’s a value selected.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-sheet elevation="10" class="py-4 px-1">
          <v-chip-group mandatory active-class="primary--text">
            <v-chip v-for="tag in tags" :key="tag">{{ tag }}</v-chip>
          </v-chip-group>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    tags: ["mango", "apple", "orange", "pear", "grape"],
  }),
};
</script>

We put the mandatory prop on the v-chip-group component.

Multiple

The multiple prop lets us select multiple chips.

For instance, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-sheet elevation="10" class="py-4 px-1">
          <v-chip-group multiple active-class="primary--text">
            <v-chip v-for="tag in tags" :key="tag">{{ tag }}</v-chip>
          </v-chip-group>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    tags: ["mango", "apple", "orange", "pear", "grape"],
  }),
};
</script>

then we can select multiple chips.

Filter Results

Chips can have additional feedback with the filter prop.

For example, we can write:

<template>
  <v-container class="grey lighten-5">
    <v-row>
      <v-col>
        <v-card class="mx-auto" max-width="400">
          <v-card-text>
            <h2 class="title mb-2">Choose fruits</h2>

            <v-chip-group v-model="fruits" column multiple>
              <v-chip filter outlined>apple</v-chip>
              <v-chip filter outlined>orange</v-chip>
              <v-chip filter outlined>grape</v-chip>
            </v-chip-group>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    fruits: [],
  }),
};
</script>

to add chips that show a checkmark when it’s chosen.

v-model will bind the selected items to the model.

filter is what makes the checkmark shown.

outlined makes the chip displayed with a white background when it’s not selected.

Conclusion

We can add chip groups to show a group of chips that we can select.