QCheckbox ✔️

Allows to choose one or more options. Try a sandbox story

Examples

Types:

Props

label

• type string
• default null

Defines the text of the checkbox. You could use default slot instead of the label prop as well.

<q-checkbox label="Label" />

modelValue

• type boolean
• default null

<q-checkbox v-model="model" />

indeterminate

• type boolean
• default false

Defines the checkbox indeterminacy

<q-checkbox indeterminate />

Result:

disabled

• type boolean
• default false

Sets disabled checkbox state

<q-checkbox disabled />

Result:

rootTag

• type string
• default label

Sets custom root tag

<q-checkbox root-tag="div" />

validateEvent

• type boolean
• default false

If checkbox wrapped in QFormItem, prop validateEvent defines if checkbox change event will be validated immediately

Code Example

<q-form
  :model="model"
  :rules="rules"
>
  <q-form-item prop="checkbox">
    <q-checkbox
      v-model="model.checkbox"
      label="Required checkbox"
      validate-event
    />
  </q-form-item>
</q-form>

Result

Events

update:modelValue

Triggers when the model is being updated

change

Alias for update:modelValue

In template:

<q-checkbox
  v-model="model"
  @change="changeHandler"
/>

In setup:

setup() {
    const model = ref(false);

    const changeHandler = (value) => {
        // do something with new value
    }

    return { model, changeHandler }
}

setup() {
    const model = ref<boolean>(false);

    const changeHandler = (value: boolean): void => {
        // do something with new value
    }

    return { model, changeHandler }
}

Slots

Default

Defines the text of the checkbox label, like label prop does. Just put the label text between QCheckbox tags.

<q-checkbox>Label</q-checkbox>

QCheckboxGroup

You also could wrap a several QCheckboxes in a group using QCheckboxGroup.