Quaff

QCheckbox

Checkboxes select independent options or mark items as complete. An indeterminate state shows when only part of a group is selected.

Movie night

info QCheckbox API Source

interface QCheckboxProps extends HTMLAttributes<HTMLLabelElement>

disabled
?: boolean = false
Puts the component into a disabled state, which prevents user interaction.

error
?: boolean = false
Indicates an error state for the checkbox.

indeterminate
?: boolean = $bindable(false)
Controls the checkbox's independent native indeterminate state. This property is bindable.

label
?: string = ""
The text to be displayed in the component. When applicable, will overwrite the children snippet content.

value
?: boolean = $bindable(undefined)
The bound value of the component.

Usage

Value Binding
Bind value to a boolean. Each checkbox controls an independent choice; clicking its label also toggles it.

Gift options

Gift note included true

Select All
Derive the parent checkbox's value and indeterminate from the group. A mixed state means some options are selected. The onchange handler selects or clears them all.

Day-trip checklist

1 of 3 packed

indeterminate is independent of value. Use bind:indeterminate to observe it clearing when clicked; derive it from the selection for a select-all control.

Disabled States
disabled prevents changes and removes the checkbox from keyboard navigation. Checked, unchecked and mixed states remain visible.

Team settings

Managed by your administrator.

Validation and Reset
error marks an invalid choice. Try reserving without checking the box, then confirm and retry. Reset updates the bound value and clears the feedback.

Saturday workshop

Accessibility

Give each checkbox a visible label. Tab reaches enabled checkboxes; Space toggles them. The native input announces checked, mixed and invalid states.

Explain errors in text and why an option is disabled. Use a select-all checkbox only for related choices, and announce selection changes with nearby status text.