Checkbox
The Checkbox is an accessible binary control: checked, unchecked, or (on demand) indeterminate for “select some” patterns. The visible control is a styled box with a check or minus icon; the real state lives on a screen-reader-only native <input type="checkbox">.
Import from the framework package. The label is supplied with title (and optionally subtext). You can run the field uncontrolled (internal state) or controlled with explicit checked state.
Loading Code Block...Basic example
Section titled “Basic example”A medium-sized checkbox with a single title label, running in uncontrolled mode.
Loading Code Block...Controlled state
Section titled “Controlled state”Pass checked and onChange for a controlled checkbox. onChange receives the native change event; use event.target.checked for the new value.
Use v-model (or v-model:modelValue) with a boolean ref. For use inside a group with an array model, set value on each checkbox so inclusion in the array represents selection.
Loading Code Block...Discrete sizes sm and md adjust the control and typography scale.
Loading Code Block...Title and subtext
Section titled “Title and subtext”title is the primary label. subtext adds supporting copy below the title. titleBold (default true) controls emphasis on the title.
Loading Code Block...Alignment
Section titled “Alignment”alignment places the box left or right of the label stack.
Loading Code Block...Stretch (full width)
Section titled “Stretch (full width)”Use stretch so the label row spans the container with space distributed between the box and text (useful in lists or settings rows). The prop has the same name and semantics in both frameworks.
Loading Code Block...Disabled
Section titled “Disabled”Disabled checkboxes do not toggle and use muted colours.
Loading Code Block...Indeterminate
Section titled “Indeterminate”The indeterminate visual (minus icon) is for parent rows when some but not all children are selected. It is presentational only: you still manage checked from your data model.
Loading Code Block...Text layout
Section titled “Text layout”Use textLayout to control how the title and subtext relate to the checkbox. "vertical" (default) stacks the title above the subtext in a column; "horizontal" places the title inline with the checkbox and renders the subtext to the right of the title stack. Both frameworks expose the prop with the same values.
Optional slots #title and #subtext replace the string props when you need rich markup.
Loading Code Block...Accessibility
Section titled “Accessibility”- The component renders a real
input type="checkbox"withsr-onlyso screen readers get the correct role and state. - Associate copy with the control by keeping labels inside the
labelelement (handled by the component). - For indeterminate parents, keep
aria-checkedin sync if you bypass this component’s input; here the visual indeterminate does not set nativeindeterminateon the DOM input—verify behaviour if you rely on AT for “mixed” state.
Best practices
Section titled “Best practices”Props and API
Section titled “Props and API”Native attributes (name, id, value, data-*, etc.) are spread onto the hidden input via rest props.
Emits: update:modelValue — the new boolean (or, in checkbox-group mode, the updated array of selected values).
Slots: #title, #subtext — take precedence over the matching string props when both are supplied.