Sora UI

Checkbox

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

Made by Axyl

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

Loading...

Installation

File Structure

checkbox.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 supplementary title and description text.

Loading...

Card Selector

Selectable card container with embedded animated checkbox.

Loading...

Custom Style

Checkbox with customized emerald, pill, and large hero shapes.

Loading...

Indeterminate State

Checkbox in a partially checked indeterminate state.

Loading...

Disabled

Non-interactive disabled checkbox variants.

Loading...

Props

PropTypeDefault
checked?
boolean | "indeterminate"
-
defaultChecked?
boolean | "indeterminate"
false
onCheckedChange?
(checked: boolean | "indeterminate") => void
-
label?
ReactNode
-
labelClassName?
string
-
indicatorClassName?
string
-
disabled?
boolean
false
className?
string
-

Built by Axyl. A motion-first component registry for React.

Last updated: 8/20/2026