Checkbox

SCheckbox is a checkbox built on Reka UI with correct semantics (role="checkbox", keyboard, data-state). The label is rendered with the reusable SLabel. It supports a mixed state (indeterminate) and works with v-model.

Basic usage

Color

The color prop sets the checked state color from the palette (primary, teal, teal-10); text-color sets the check mark color.

Mixed state

State icons

checked-icon sets the checked state icon, indeterminate-icon the mixed state icon (both take a registry name or a raw path).

Required checkbox

The required prop marks the checkbox as required for form submission: the browser will not submit the form until it is checked.

Hint and error message

The hint and error props render text under the checkbox and link it through aria-describedby, with no separate SFormField wrapper needed.

Label from markup

The slot accepts more than text: the label flows like a regular paragraph, so links inside it wrap together with the rest of the sentence, and the required asterisk stays attached to the last word. You do not need to wrap the content in a single element.

Alignment and stretch

align="center" places the box at the middle of a multi-line label; by default it sits at the first line. stretch makes the checkbox fill the container width: the label takes the free space, and a click anywhere on the row toggles the checkbox.

API

Props

Name	Type	Default	Description
color	string	undefined	Accent color (checked state): a name from the palette (primary/teal/teal-10).
text-color	string	undefined	Check mark color on the fill: a name from the palette. White by default.
label	string	undefined	Label text next to the checkbox (can be replaced with the default slot).
value	string	undefined	Checkbox value in a group/form (the value attribute).
disabled	boolean	undefined	Disables the checkbox.
required	boolean	undefined	Required for form submission.
hint	string	undefined	Hint below the checkbox.
error	string	undefined	Error message below the checkbox. When set, the checkbox is marked invalid.
invalid	boolean	undefined	Marks the checkbox invalid explicitly (in addition to error).
checked-icon	string	"check"	Checked state icon (a registry name or a raw path).
indeterminate-icon	string	"minus"	Indeterminate state icon (a registry name or a raw path).
align	"start" | "center"	"start"	Vertical alignment of the box relative to the label: start aligns it with the first line, center with the middle of a multi-line label.
stretch	boolean	undefined	Stretches the checkbox to the container width; the label takes the free space. A click anywhere on the row selects the option, which turns the component into a selection card.
id	string	undefined	Checkbox id. Generated automatically (SSR-safe) when not set.
model-value	| false | true | "indeterminate"	false	Checkbox state. 'indeterminate' is the mixed state.

Events

Name	Signature	Description
update:modelValue	(value: boolean | "indeterminate") => void	Emitted when modelValue changes. Used for two-way binding (v-model).

Slots

Name	Description
default	Label text (alternative to the label prop).