Checkbox

A labeled native checkbox with controlled, uncontrolled, and mixed presentation.@gemologic/sheen · forms

Playground

label

checked

Receive alerts

Send alerts for this workspace.

<Checkbox label="Receive alerts" name="alerts" description="Send alerts for this workspace." />

Variant matrix

Opt in

Receive alerts

Send alerts for this workspace.

Anatomy

Package

@gemologic/sheen

Source

packages/ui/src/primitives/Checkbox.tsx

Tokens

--sheen-color-border-control
--sheen-color-accent
--sheen-color-focus-ring
--sheen-icon-size-md

Accessibility

Role: checkboxKeyboard: Tab, Shift+Tab, Space

Do

Use mixed state for partial selections and update it explicitly.

Do not

Do not use a checkbox for an immediate on/off setting that needs switch semantics.

Generated props

Name	Type	Default	Description
`id`	`string`	—	Root container ID, also used to derive stable internal IDs.
`ref`	`HTMLDivElement \| ((element: HTMLDivElement) => void)`	—	Root container reference; use inputRef for the native input.
`onPointerDown`	`NonNullable<JSX.EventHandlerUnion<HTMLDivElement, PointerEvent, JSX.EventHandler<HTMLDivElement, PointerEvent>> \| undefined>`	—	Native root pointer-down handler, composed with primitive focus behavior.
`label` *	`string`	—	Required visible label.
`description`	`string`	—	Supporting text associated with the native input.
`error`	`string`	—	Associated validation error; marks the input invalid without moving focus.
`checked`	`boolean`	—	App-owned checked value, retained across form reset unless the app changes it.
`defaultChecked`	`boolean`	`false`	Initial uncontrolled checked value restored on form reset.
`indeterminate`	`boolean`	`false`	App-owned mixed presentation; clear it explicitly when resolving a partial selection.
`onCheckedChange`	`(checked: boolean) => void`	—	Receives requested checked changes, not a DOM event.
`disabled`	`boolean`	`false`	Disables activation, keyboard focus, and form submission.
`readOnly`	`boolean`	`false`	Prevents changes while retaining focus and submission.
`required`	`boolean`	`false`	Requires this checkbox to be checked for native form validation.
`name`	`string`	—	Native form field name; omitted or empty names are not submitted.
`form`	`string \| undefined`	—	ID of an owning form outside the input's ancestry; forwarded to the native input.
`value`	`string`	`on`	Submitted value when checked.
`inputRef`	`(element: HTMLInputElement) => void`	—	Receives the native input; ref and remaining DOM props belong to the root container.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.