Loading...
Checkbox allows users to make a binary choice—either toggling a single option on or off or selecting multiple options from a list.
Can be controlled or uncontrolled
Multiple variants, sizes and border radiuses
Animated with Motion
Supports indeterminate state
Handles invalid appearance
Full keyboard navigation
Supports custom icon and styles
Respects reduce motion with system settings and through props
There’s an additional component built specifically for easy and clean isomorphic form validation. It leverages Conform and Zod, providing a single source of truth for both frontend and backend while preserving native browser validation APIs (Conform works with any valid HTML form and captures form values using the FormData Web API). It also seamlessly integrates with the latest React 19 hook:
The component fully supports the original Radix API, allowing you to use custom icons or styling.
It will animate custom icon when the checkbox is checked or unchecked.
| Prop | Type | Default |
|---|---|---|
size | enum | "default" |
radius | enum | ― |
invalid | boolean | ― |
reduceMotion | boolean | false |
| Prop | Type | Default |
|---|---|---|
size | enum | "default" |
radius | enum | ― |
invalid | boolean | ― |
reduceMotion | boolean | false |
Support all Radix API
Support all Radix API
Useful links:
// Option #1. Basic usage:
<Checkbox />
// Option #2. Custom usage:
<CheckboxRoot>
<CheckboxIndicator />
</CheckboxRoot>
CheckboxFielduseActionState