Sora UI

Checkbox

An accessible, stylable checkbox built on Base UI with a smooth Motion path-draw checkmark. Copy-paste into your app like shadcn/ui.

Made by Axyl

Interactive checkbox with animated SVG path checkmark drawing.

Loading...

Installation

File Structure

checkbox.tsx

Usage

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

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

Examples

With Text & Description

Checkbox accompanied by title and secondary helper description.

Loading...

Disabled States

Disabled checkbox in both checked and unchecked states.

Loading...

Interactive Card

Card container acting as an interactive checkbox toggle.

Loading...

Indeterminate Group

Master checkbox with indeterminate state controlling a nested list of checkboxes.

Loading...

Custom Colors & Sizes

Tailwind class overrides demonstrating custom brand colors, circular pill shapes, and size scaling.

Loading...

Props

Checkbox

PropTypeDefault
label?
ReactNode
-
labelClassName?
string
-
indicatorClassName?
string
-
checked?
boolean
-
defaultChecked?
boolean
false
onCheckedChange?
(checked: boolean, eventDetails: Checkbox.Root.ChangeEventDetails) => void
-
disabled?
boolean
false
indeterminate?
boolean
false
required?
boolean
false
name?
string
-
value?
string
-
className?
string
-

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

Last updated: 8/20/2026