Sora UI has moved to ui.soralabs.studio.Learn more
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...

Indeterminate State

Checkbox in a partially checked indeterminate state.

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/21/2026