Checkbox

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

Pure UI

Installation

Loading...

Usage

// Option #1. Basic usage:
<Checkbox />

// Option #2. Custom usage:
<CheckboxRoot>
  <CheckboxIndicator />
</CheckboxRoot>

Basic

Custom

Examples

Size

Radius

Reduce Motion

Validation

There’s an additional CheckboxField 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 useActionState hook:

Indeterminate

Disabled

Custom Icon & Styles

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.

API Reference

Checkbox

PropTypeDefault
size
enum
"default"
radius
enum
―
invalid
boolean
―
reduceMotion
boolean
false

Root

PropTypeDefault
size
enum
"default"
radius
enum
―
invalid
boolean
―
reduceMotion
boolean
false

Support all Radix API

Indicator

Support all Radix API

Useful links:

⮠ PrevButton
Next ⮡Collapsible