Components

Checkbox

A 16px box that fills with the accent and a white check. Supports a label, an indeterminate state, and every form attribute.

Usage

Use it to:

  • pick any number of independent options in a form or list
  • show progress in a to-do list
  • select rows, with an indeterminate “select all”

Don’t use it to:

  • switch a setting on immediately (use Switch)
  • choose exactly one option (use RadioGroup)

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/CheckboxExample.tsx
import { useState } from 'react';
import { Checkbox } from '@krackedui/motion';

export function CheckboxDemo() {
  const [done, setDone] = useState(true);
  return (
    <Checkbox label="Draft the project brief" checked={done} onCheckedChange={setDone} />
  );
}

Examples

States

Select all

A parent checkbox shows indeterminate while only some children are checked.

Size

md (16px) by default; sm (14px) for dense rows such as table cells.

Dark theme

API Reference

Checkbox

A native <input type="checkbox"> drawn over the visual box; the ref and all other <input> props (name, value, required, aria-*) go to the input. Adds:

PropTypeDefault
checked
boolean"indeterminate"
defaultChecked
boolean
false
onCheckedChange
(checked: boolean) => void
onChange
ChangeEventHandler<HTMLInputElement>
label
ReactNode
invalid
boolean
false
size
"sm""md"
"md"
disabled
boolean
false
className
string

Accessibility

  • Tab focuses the box; Space toggles it. Clicking the label toggles it too.
  • It is a real checkbox: checked, indeterminate (announced as “mixed”), required, disabled and aria-invalid reach assistive tech.
  • The focus ring is drawn around the box. On touch screens the hit area grows to 24×24 without changing the drawing.
  • Always provide a name: label, aria-label, or a surrounding Field.
© 2026 Motion. Internal documentation.