Vuetify is a popular UI framework for Vue apps.

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

Checkboxes

We can add checkboxes with the v-checkbox component.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-checkbox v-model="checked" :label="`Checkbox: ${checked.toString()}`"></v-checkbox>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    checked: false,
  }),
};
</script>

We add the v-model directive to bind it to a state value.

Then we displayed the checked value in the label .

Also, we can have multiple checkboxes that bind to the same value.

This way, the state would be an array:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <p>{{ selected }}</p>
        <v-checkbox v-model="selected" label="james" value="james"></v-checkbox>
        <v-checkbox v-model="selected" label="mary" value="mary"></v-checkbox>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    selected: [],
  }),
};
</script>

We added the value prop so that when the checkbox is checked, the value will be in the selected array.

Checkbox States

A check box can also be indeterminate.

We can add the indeterminate prop to make it indeterminate:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-checkbox value indeterminate></v-checkbox>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

They can also be disabled:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-checkbox input-value="true" value disabled></v-checkbox>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Checkbox Colors

We can change the color of the checkbox with the color prop:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-checkbox v-model="checked" label="red" color="red" value="red" hide-details></v-checkbox>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    checked: false,
  }),
};
</script>

We have a red checkbox since we set color to red .

Checkboxes Inline with a Text Field

We can add checkboxes that are inline with a text field.

To do that, we write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-row align="center">
          <v-checkbox v-model="checked" hide-details class="shrink mr-2 mt-0"></v-checkbox>
          <v-text-field label="Include files"></v-text-field>
        </v-row>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    checked: false,
  }),
};
</script>

We put the checkbox and text field in the same v-row to make them display side by side.

Conclusion

We can add checkboxes with various styles and behavior with Vuetify.