# Checkboxes

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. A simpler version, v-simple-checkbox is used primarily as a lightweight alternative in data-table components to select rows or display inline boolean data.

# Usage

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


# Examples

# Props

# 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.

# Model as boolean

A single v-checkbox will have a boolean value as its value.

# States

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

# Slots

# Label slot

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

# Misc

# Inline text-field

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

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:05/11/2021, 3:09:20 PM