Checkbox · Radix UI

An accessible, stylable checkbox component built with Radix UI and Motion for React with spring-animated checkmark SVG drawing.

Tweak Props

label

disabled

false

checkbox.tsx

Loading code…

Default animated Radix UI checkbox with interactive label and spring checkmark draw animation.

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

components/sora-ui/radix/checkbox.tsx

Loading code…

Update the import paths to match your project setup.

File Structure

checkbox.tsx

use-controlled-state.tsx

Usage

import { Checkbox } from "@/components/sora-ui/radix/checkbox";

export default function Page() {
  return <Checkbox label="Accept terms and conditions" />;
}

Uncontrolled with Default Checked

import { Checkbox } from "@/components/sora-ui/radix/checkbox";

export default function Page() {
  return <Checkbox defaultChecked label="Enable email notifications" />;
}

Controlled

import { Checkbox } from "@/components/sora-ui/radix/checkbox";
import { useState } from "react";

export default function Page() {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox
      checked={checked}
      onCheckedChange={(val) => setChecked(Boolean(val))}
      label="Controlled acceptance"
    />
  );
}

Examples

With Helper Text

checkbox-with-text.tsx

Loading code…

Checkbox with supplementary title and description text.

Card Selector

checkbox-card.tsx

Loading code…

Selectable card container with embedded animated checkbox.

Indeterminate State

checkbox-indeterminate.tsx

Loading code…

Checkbox in a partially checked indeterminate state.

Props

Prop	Type	Default
`checked?`	`boolean \| "indeterminate"`	-
`defaultChecked?`	`boolean \| "indeterminate"`	`false`
`onCheckedChange?`	`(checked: boolean \| "indeterminate") => void`	-
`label?`	`ReactNode`	-
`labelClassName?`	`string`	-
`indicatorClassName?`	`string`	-
`disabled?`	`boolean`	`false`
`className?`	`string`	-

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

components/sora-ui/radix/checkbox.tsx

Loading code…

Update the import paths to match your project setup.

File Structure

checkbox.tsx

use-controlled-state.tsx

Usage

import { Checkbox } from "@/components/sora-ui/radix/checkbox";

export default function Page() {
  return <Checkbox label="Accept terms and conditions" />;
}

import { Checkbox } from "@/components/sora-ui/radix/checkbox";

export default function Page() {
  return <Checkbox defaultChecked label="Enable email notifications" />;
}

import { Checkbox } from "@/components/sora-ui/radix/checkbox";
import { useState } from "react";

export default function Page() {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox
      checked={checked}
      onCheckedChange={(val) => setChecked(Boolean(val))}
      label="Controlled acceptance"
    />
  );
}

Examples

Accept terms and conditions

By clicking this checkbox, you agree to our Terms of Service and Privacy Policy.

checkbox-with-text.tsx

Loading code…

Checkbox with supplementary title and description text.

Two-factor AuthenticationProtect your account with an extra layer of security on login.

checkbox-card.tsx

Loading code…

Selectable card container with embedded animated checkbox.

Select all notifications

Comments

Mentions

Promotions

checkbox-indeterminate.tsx

Loading code…

Checkbox in a partially checked indeterminate state.

Prop

Type

Default

checked?

boolean | "indeterminate"

defaultChecked?

boolean | "indeterminate"

false

onCheckedChange?

(checked: boolean | "indeterminate") => void

label?

ReactNode

labelClassName?

string

indicatorClassName?

string

disabled?

boolean

false

className?

string

Checkbox · Radix UI

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

Usage

Uncontrolled with Default Checked

Controlled

Examples

With Helper Text

Card Selector

Indeterminate State

Props

On this page

Checkbox · Radix UI

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

Usage

Uncontrolled with Default Checked

Controlled

Examples

With Helper Text

Card Selector

Indeterminate State

Props

On this page