Dashral Pro is on the wayGet 30% off at launch

Dashral

Checkbox

Checkbox with motion: the tick draws itself along its stroke as it's checked and back out as it's cleared, and the box presses in on a spring.

$ pnpm dlx shadcn@latest add https://dashral.com/r/motion-checkbox.json

A summary of your team's activity, every Monday.

Required to join the beta.

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/motion-checkbox.json

Adds components/dashral/motion/checkbox.tsx, the Checkbox it builds on (in components/dashral/), motion and the motion files every motion component shares. With the registry in your components.json:

$ pnpm dlx shadcn@latest add @dashral/motion-checkbox

Usage

The same as Checkbox, imported from components/dashral/motion/: swap the import and it moves.

example.tsx
import { Checkbox } from "@/components/dashral/motion/checkbox"

<Checkbox label="Send me the weekly report" checked={weekly} onCheckedChange={setWeekly} />

Examples

A to-do list

Tick a task: the mark draws in, then it slides down among the done ones as the bar fills. Press a box and sweep down the list to tick several.

1 of 4 done

Select all and delete

Pick some and a bar rises in; Delete shows it's working, then the files fold away one after another.

5 files
  • Q3 revenue.csv84 KB
  • Customers.xlsx1.2 MB
  • Churn notes.md6 KB
  • Pricing deck.pdf3.4 MB
  • Roadmap.png620 KB
2 selected

Colors and variants

Every color, solid and outline. Tick all runs a wave of ticks across them; Clear runs it back.

solid
outline

Compared with Default

Default

The tick zooms in on --ease-spring, and vanishes at once when cleared.

Motion

The tick draws itself along its stroke and draws back out when cleared; the dash grows from its middle; the box presses in while held; press and sweep over others to set them all.

How the two editions differ in general, and which to use where: Motion.

API reference

Every prop of Checkbox, and every attribute of the element it renders. The Motion edition adds no props of its own.

Checkbox

Also takes every prop of Radix Checkbox(opens in a new tab).

PropTypeDefault
checked / defaultCheckedboolean | "indeterminate"

Controlled or initial state.

—
onCheckedChange(checked: boolean | "indeterminate") => void

Called when it's toggled.

—
disabled / required / name / value

Like a native checkbox; it takes part in forms.

—
labelReactNode

Beside the control; clicking it works the control.

—
descriptionReactNode

A hint under the label.

—
errorboolean | ReactNode

true shows the error style; a message also shows under the label.

—
color"primary" | "neutral" | "info" | "success" | "warning" | "destructive" | "highlight"

The color when on, ticked or picked.

"primary"
variant"solid" | "outline"

solid fills the box when ticked; outline colors only its border and mark.

"solid"
labelPosition"end" | "start"

"start" puts the label first and the box at the far end.

"end"
classNames{ root, label, description, error, checkbox }

Classes for each part.

—

Motion

  • Checked, the tick draws along its stroke from the short end (--duration-standard, --ease-enter); cleared, it draws back out faster (--duration-fast, --ease-exit).
  • Indeterminate draws its dash from the middle out to both ends.
  • The box presses in on a spring while held; the fill and border colors still change in CSS.
  • Press one and, holding, sweep the pointer over others: each one passed takes the state the first is going to (all ticked or all cleared), as in a spreadsheet or a mail list, without selecting text on the way. Mouse and pen; a finger's drag still scrolls.
  • With reduced motion the mark only fades, and the box doesn't press.