Checkbox

Binary checkbox control, wrapping Radix Checkbox, with a primary-checked state.

Checkbox wraps @radix-ui/react-checkbox: the checked state uses bg-primary, transitions run on --dur-fast, and the whole thing works inside a plain <label> for click-to-toggle.

Installation

import { Checkbox } from "@iammikz/srui";

Usage

Accept terms

Props

React.ComponentPropsWithoutRef<typeof RadixCheckbox.Root> — checked ("indeterminate" renders a minus), onCheckedChange, disabled, required, name, value, plus invalid?: boolean (destructive border + aria-invalid) and native button attributes.

Examples

Controlled

Controlled: on

Disabled

Indeterminate and invalid

checked="indeterminate" renders a minus (the "some selected" state); invalid paints the destructive border and sets aria-invalid.

Select all

Accept terms

Accessibility

Radix renders a real checkbox role button with aria-checked; Space toggles it; the label wrapping pattern gives it an accessible name with zero wiring.