Quasar Checkbox     

Basic Usage

<label>
<q-checkbox v-model="checked"></q-checkbox>
Checkbox Label
</label>
<!-- Disabled: -->
<label>
<q-checkbox v-model="checked" disable></q-checkbox>
Checkbox Label
</label>
<!-- No label: -->
<q-checkbox v-model="checked"></q-checkbox>

Coloring

Use one of the Quasar colors from the Color Palette, like primary, secondary, orange, teal as CSS class:

<q-checkbox class="orange">...</q-checkbox>

Vue Properties

Vue PropertyTypeDescription
disableBooleanIf disabled user can not change state.

Vue Events

Vue EventDescription
@inputTriggered on model value change with the new value.

Inside of a List Usage

<div class="list">
<label class="item">
<div class="item-primary">
<q-checkbox v-model="checked"></q-checkbox>
</div>
<div class="item-content">
Notifications
</div>
</label>
<label class="item two-lines">
<div class="item-primary">
<q-checkbox v-model="checked"></q-checkbox>
</div>
<div class="item-content">
<div>Notifications</div>
<div>Allow notifications</div>
</div>
</label>
<label class="item three-lines">
<div class="item-primary">
<q-checkbox v-model="checked"></q-checkbox>
</div>
<div class="item-content">
<div>Notifications</div>
<div>Allow notifications Allow notifications Allow notifications Allow notifications Allow notifications </div>
</div>
</label>
</div>