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" />
1
labelSize
- Type
String - Default
regular
Defines the label size of the checkbox.
<q-checkbox
label="Label"
label-size="small"
/>
1
2
3
4
2
3
4
modelValue
- type
boolean - Default
null
<q-checkbox v-model="model" />
1
indeterminate
- type
boolean - Default
false
Defines the checkbox indeterminacy
<q-checkbox indeterminate />
1
Result:
disabled
- type
boolean - Default
false
Sets disabled checkbox state
<q-checkbox disabled />
1
Result:
rootTag
- Type
String - Default
label
Sets custom root tag
<q-checkbox root-tag="div" />
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
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"
/>
1
2
3
4
2
3
4
In setup:
setup() {
const model = ref(false);
const changeHandler = (value) => {
// do something with new value
}
return { model, changeHandler }
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
setup() {
const model = ref<boolean>(false);
const changeHandler = (value: boolean): void => {
// do something with new value
}
return { model, changeHandler }
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
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>
1
QCheckboxGroup
You also could wrap a several QCheckboxes in a group using QCheckboxGroup.