Checkbox

• Layer: Component
• Base: @ark-ui/solid/checkbox + custom styling

States

Checked · unchecked · disabled

Include Plane-2 phenomena in report

Broadcast to Foyer channel

Locked (disabled)

State	Visual
Unchecked	18×18 outlined square, --colors-bg-muted fill, --colors-border.
Checked	--colors-accent-default fill + tick stroked in --colors-bg-default.
Disabled	Same geometry, opacity: 0.4, cursor not-allowed.
Focus-visible	Cyan focus ring via --shadows-focus.

Plane 1 Constraints

No drop shadows, no glow halo. Selection is signified by the --colors-accent-default fill — the system’s one selected-state token.

Accessibility

Wraps @ark-ui/solid/checkbox, which manages role="checkbox", aria-checked (true/false/mixed), keyboard activation (Space), and a hidden native input for form submission. The DS adds the visual layer only.

Props

Prop	Type	Default	Description
checked	boolean	—	Controlled checked state. Ark’s "indeterminate" value is accepted but not visualised — see note below.
onCheckedChange	(details: { checked: CheckedState }) => void	—	Change handler
disabled	boolean	false	Disables interaction
children	JSX.Element	—	Optional label, rendered to the right
aria-label	string	—	Required when no visible children label.

Note on indeterminate — Ark UI supports a tri-state checked value, but indeterminate is only semantically meaningful inside a parent-of-group pattern (e.g. a “select all” checkbox whose children are partially checked). Without a Checkbox.Group primitive, a standalone indeterminate checkbox has no meaning and the DS does not render a distinct glyph for it. If you build a group in the future, either ship a dedicated indeterminate-tagged indicator then or override CheckboxIndicator at the call site.