Checkbox     

The Quasar Checkbox component is a basic element to be used for selection or toggling by the user. It has a number of features, as described below.

Please also refer to the Option Group documentation on other possibilities for creating groups of Toggles.

Works well with QField for additional functionality such as a helper, error message placeholder and many others.

Installation

Edit /quasar.conf.js:

framework: {
  components: ['QCheckbox']
}

Basic Usage

<!-- No label: -->
<q-checkbox v-model="checked" />

<!-- With a label -->
<q-checkbox v-model="checked" label="Checkbox Label" />

<!-- Disabled: -->
<q-checkbox v-model="checked" disable />

Vue Properties

Supports v-model which should be binded to a Boolean or Array in your scope.

Vue PropertyTypeDescription
valObjectUsed to modify the v-model of the Checkbox when using an Array as v-model.
true-valueAnyGets into “true” state when model has this value.
false-valueAnyGets into “false” state when model has this value.
indeterminate-valueAnyGets into “indeterminate” state when model has this value. Default is null.
toggle-indeterminateBooleanToggle between 3 states, including “indeterminate”.
labelStringThe text label for the Checkbox.
left-labelBooleanSet to true, if the label should be placed to the left of the Checkbox.
checked-iconStringOptional icon to use, when the Checkbox is checked.
unchecked-iconStringOptional icon to use, when the Checkbox is not checked.
indeterminate-iconStringOptional icon to use, when the Checkbox is in indeterminate state.
colorStringColor from Quasar Color Palette.
keep-colorBooleanKeep color when not truthy too.
readonlyBooleanSet to true, to make the checkbox read-only.
disableBooleanSet to true, to disable the checkbox.
darkBooleanSet to true when background is dark.
no-focusBoolean(v0.17+) Disable accessibility for this component so that it can’t receive focus.

Vue Events

Vue EventDescription
@inputTriggered when it changes model.
@blurTriggered, when Checkbox loses focus.
@focusTriggered, when Checkbox gains focus.

Array as Model

If you have a number of checkboxes for a selection, use an array as the model object and specify val property.

<q-checkbox v-model="selection" val="one" label="One" />
<br><br>
<q-checkbox v-model="selection" val="two" label="Two" />
<br><br>
<q-checkbox v-model="selection" val="three" label="Three" />
<script>
export default {
  data () {
    return {
      selection: ['one', 'two', 'three']
    }
  }
}
</script>

Ticking all Checkboxes will make selection scope variable to be ['one', 'two', 'three']. Unticking all Checkboxes will result in selection being an empty array [].

More Examples

There are a number of props, which are available to help quickly format a Checkbox. An interesting feature of Checkbox is the ripple effect that user gets when clicking/tapping on it to change its state.

Custom Model Values

Instead of the default true/false values, you can use custom ones:

<q-checkbox
  v-model="customModel"
  color="secondary"
  label="Do you agree with the terms & conditions?"
  true-value="yes"
  false-value="no"
/>

Specific Icons

Sometimes, you might need a checkbox simply as a type of button, to maybe turn something on or off. You can do this with the checked-icon and unchecked-icon props.

<!-- a happy and unhappy smiley, maybe for a one-touch satisfaction feedback -->
<q-checkbox
  v-model="checked"
  checked-icon="sentiment very satisfied"
  unchecked-icon="sentiment very dissatisfied"
/>

<!-- an eye and a crossed out eye to indicate visibility -->
<q-checkbox
  v-model="checked"
  checked-icon="visibility"
  unchecked-icon="visibility_off"
/>

Coloring

Use the color prop to control the Checkbox color.

<q-checkbox v-model="checked" color="teal" />

<q-checkbox v-model="checked" color="orange" />

<q-checkbox v-model="checked" color="dark" />

Label Position

Use the left-label prop, to move the label to the left of Checkbox.

<q-checkbox
  v-model="checked"
  color="teal"
  left-label
  label="Checkbox Label"
/>

Usage Inside of a List

In the following example we use the Right side of QItems to insert Checkbox, but it works anywhere.

<q-list link>
  <!--
    Rendering a <label> tag (notice tag="label")
    so the whole QItem will respond to clicks to
    change Checkbox state.
  -->
  <q-item tag="label">
    <q-item-side>
      <q-checkbox v-model="checked" />
    </q-item-side>
    <q-item-main>
      <q-item-tile label>Events and reminders</q-item-tile>
    </q-item-main>
  </q-item>
  <q-item tag="label">
    <q-item-side>
      <q-checkbox v-model="checked" />
    </q-item-side>
    <q-item-main>
      <q-item-tile label>Events and reminders</q-item-tile>
      <q-item-tile sublabel>Lorem ipsum</q-item-tile>
    </q-item-main>
  </q-item>
  <q-item tag="label" multiline>
    <q-item-side>
      <q-checkbox v-model="checked" />
    </q-item-side>
    <q-item-main>
      <q-item-tile label>Events and reminders</q-item-tile>
      <q-item-tile sublabel>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</q-item-tile>
    </q-item-main>
  </q-item>
</q-list>
Radio Toggle
Last updated: Sat May 25 2019
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub