Checkbox

React component

Select an independent option or represent partial selection.

Try it out

Use the live controls or open the Code tab to view and copy the example.

Product announcements

News worth opening your inbox for.

Weekly digest

Highlights delivered every Monday.

Partially selected

Indeterminate selection.

API reference

Generated from the package’s TypeScript exports. Standard React event and ARIA attributes are also accepted where the component wraps a native element.

Prop	Type	Description
`indeterminate`	`boolean \| undefined`	See the typed definition and working example for this option.
`onCheckedChange`	`((checked: boolean) => void) \| undefined`	Called with the next checked state.
`disabled`	`boolean \| undefined`	Disables interaction (or date matchers for DatePicker).
`name`	`string \| undefined`	Field name used in form submission.
`value`	`string \| number \| readonly string[] \| undefined`	Controlled value. Pair with its change callback.
`defaultChecked`	`boolean \| undefined`	Standard React / HTML attribute passed to the underlying element.
`defaultValue`	`string \| number \| readonly string[] \| undefined`	Initial value for uncontrolled usage.
`className`	`string \| undefined`	Additional CSS class names.
`id`	`string \| undefined`	Standard React / HTML attribute passed to the underlying element.
`style`	`CSSProperties \| undefined`	Inline styles, including CSS custom property overrides.
`rel`	`string \| undefined`	Standard React / HTML attribute passed to the underlying element.
`children`	`ReactNode`	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLInputElement> \| undefined`	Standard React / HTML attribute passed to the underlying element.
`onBlur`	`FocusEventHandler<HTMLInputElement> \| undefined`	Standard React / HTML attribute passed to the underlying element.
`onChange`	`ChangeEventHandler<HTMLInputElement, HTMLInputElement> \| undefined`	Standard React / HTML attribute passed to the underlying element.
`onError`	`ReactEventHandler<HTMLInputElement> \| undefined`	Standard React / HTML attribute passed to the underlying element.
`onClick`	`MouseEventHandler<HTMLInputElement> \| undefined`	Standard React / HTML attribute passed to the underlying element.
`alt`	`string \| undefined`	Standard React / HTML attribute passed to the underlying element.
`autoComplete`	`HTMLInputAutoCompleteAttribute \| undefined`	Standard React / HTML attribute passed to the underlying element.
`checked`	`boolean \| undefined`	Standard React / HTML attribute passed to the underlying element.
`height`	`string \| number \| undefined`	Standard React / HTML attribute passed to the underlying element.
`max`	`string \| number \| undefined`	Standard React / HTML attribute passed to the underlying element.
`maxLength`	`number \| undefined`	Standard React / HTML attribute passed to the underlying element.
`min`	`string \| number \| undefined`	Standard React / HTML attribute passed to the underlying element.
`minLength`	`number \| undefined`	Standard React / HTML attribute passed to the underlying element.
`placeholder`	`string \| undefined`	Standard React / HTML attribute passed to the underlying element.
`readOnly`	`boolean \| undefined`	Standard React / HTML attribute passed to the underlying element.
`required`	`boolean \| undefined`	Participates in native form validation.
`src`	`string \| undefined`	Standard React / HTML attribute passed to the underlying element.
`step`	`string \| number \| undefined`	Standard React / HTML attribute passed to the underlying element.
`width`	`string \| number \| undefined`	Standard React / HTML attribute passed to the underlying element.
`label`Required	`string`	A meaningful visible or accessible label.
`description`	`string \| undefined`	Supporting instructions associated with the control.
`error`	`string \| undefined`	Validation message; also sets aria-invalid.
`hideLabel`	`boolean \| undefined`	See the typed definition and working example for this option.

Accessibility & interaction

Use a persistent visible label and provide textual errors; native controls support keyboard input and browser form constraints.

Visible focus, reduced motion, and both color themes are shared across staqui. Choose labels and document structure that make sense in your application; automated checks do not replace assistive-technology testing.

Variants & implementation notes

Supports controlled/uncontrolled checked state and the native indeterminate property. Required and validation are native browser behavior.

Use the typed API above for the supported variants. The example demonstrates the primary composition; shared controls inherit hover, focus, active and disabled treatment where applicable.

Checkbox

Try it out

API reference

Accessibility & interaction

Variants & implementation notes

Compose with