Basic
Text fields components are used for collecting user provided information.
Default
false
true
Density
Text fields components are used for collecting user provided information.
Compact
true
true
Colors
Checkboxes can be colored by using any of the builtin colors and contextual names using the color prop.
Primary
Secondary
Info
Warning
Error
Positive
Model as array
Multiple q-checkbox's can share the same v-model by using an array.
John
Jacob
Johnson
[]
Icon
Use false-icon and true-icon prop to change the icon on the checkbox.
swipe_right
Swipe
highlight_off
I agree
Checkbox Value
Use false-value and true-value prop to sets value for truthy and falsy state
1
Hide
States
q-checkbox can have different states such as default, disabled, and indeterminate.
On Disabled
Off Disabled
Custom Label
Checkbox labels can be defined in label slot - that will allow to use HTML content.
Quasar Opens in new window