Sora UI

Checkbox

An accessible checkbox component built on Base UI with a Motion spring checkmark draw animation.

Made by Axyl

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

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 Helper Text

Checkbox with supplementary title and description text.

Loading...

Card Selector

Selectable card container with embedded animated checkbox.

Loading...

Custom Icon

Checkbox rendering a customized checkmark icon.

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