Checkbox

The v-checkbox component provides users the ability to choose between two distinct values. These are very similar to a switch and can be used in complex forms and checklists.

Basic

v-checkbox in its simplest form provides a toggle between 2 values.

Density

Use density prop to reduces the input height. Available options are: default, comfortable, and compact.

Colors

Checkboxes can be colored by using any of the builtin colors and contextual names using the color prop.

Model as array

Multiple v-checkbox's can share the same v-model by using an array.

[ "John" ]

Icon

Use false-icon and true-icon prop to change the icon on the checkbox.

Checkbox value

Use false-value and true-value prop to sets value for truthy and falsy state

States

v-checkbox can have different states such as default, disabled, and indeterminate.

Label Slot

Checkbox labels can be defined in label slot - that will allow to use HTML content.

Inline text-field

You can place v-checkbox in line with other components such as v-text-field.

CONTENTS

  • Introduction

  • Basic

  • Density

  • Colors

  • Model as array

  • Icon

  • Checkbox value

  • States

  • Label Slot

  • Inline text-field