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.
Usage
A v-checkbox
in its simplest form provides a toggle between 2 values.
TIP:
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.
API
Component | Description |
---|---|
v-checkbox | Primary component |
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
If you need to place checkboxes in line with other components, you can use the v-checkbox-btn
component.
This component renders just checkbox, without the trapping of a form input such as validation, a label, and messages.