Checkbox · 0nlyType

Example

Install

Run it in a project that has the shadcn CLI set up. It brings the 0nlyType base and fraction along.

npmpnpmyarnbun

npx shadcn@latest add https://thedirectors.agency/ui/r/checkbox.json

Usage

checkbox-example.tsx

import { Checkbox, CheckboxGroup } from "@/components/ui/checkbox"export default function Example() {return (<div className="grid justify-items-start gap-x-16 gap-y-10 sm:grid-cols-2"><div className="sm:col-span-2"><CheckboxGroup legend="Before we start" tally><Checkbox defaultChecked>Share the brief</Checkbox><Checkbox defaultChecked>Agree the scope</Checkbox><Checkbox>Book a first call</Checkbox><Checkbox>Send the references</Checkbox><Checkbox>Sign the proposal</Checkbox></CheckboxGroup></div><CheckboxGroup legend="Keep in the export"><Checkbox variant="stet" defaultChecked>Comments</Checkbox><Checkbox variant="stet">Tracked changes</Checkbox><Checkbox variant="stet" defaultChecked>Page numbers</Checkbox></CheckboxGroup><CheckboxGroup legend="What should we cover?"><Checkbox variant="circled">Typography</Checkbox><Checkbox variant="circled" defaultChecked>Motion</Checkbox><Checkbox variant="circled">Colour</Checkbox></CheckboxGroup></div>)}

Contract

Underneath: native checkbox; the tally is a Fraction.
Anatomy: <label class="ot-check" data-variant="strike | stet | circled"><input type="checkbox"><span>Words</span></label>; circled adds <svg class="ot-check-loop" aria-hidden="true"> holding one path. A group is <fieldset class="ot-checklist"> with a legend.
Strike (the default), for things done. Hover sketches the strike as a pencil hairline (--ot-rule-strong). Checked: an accent strike draws left to right at 60% height, running 0.18em past both ends of the words the way a pen does. Weight drops to 300 and the colour goes to pencil. Unchecking lifts the strike away to the right.
Stet, for things kept, where a strike would read as "no". The proofreader's "let it stand": a row of dots under the words (a dotted underline, so it wraps with them). Pointing pencils the dots in; checking sets them down in the accent, a touch lower, with spiccato.
Circled, for things chosen. One pen loop round the words, after the collage's accent rings: it comes in at the upper left, runs round clockwise and on past where it began, as a hand never quite closes a circle. Pointing draws it in pencil, checking inks it in the accent at --ot-stroke. A loop has no heading to leave by, so it fades, then resets unseen.
Stet and circled: checked words are yours, so they turn italic in ink, at the expression scale but on the list's own line (line-height: 1lh), so nothing below moves.
The tally is the Fraction item: "2 / 5 done", the yours part in italic. Each figure that changes turns over on its own wheel, up when the count grows and down when it shrinks, the carry a step behind. It mounts with its first count, so nothing turns over on load. The tally follows controlled values, child changes and native form resets as well as change events.
States: rest, hover (ink), focus (outline on the words), checked, disabled. Right to left the strike runs right to left and the loop starts at the upper right. Forced colours: the loop is CanvasText, Highlight when checked; the stet dots take the forced text colour.
Keyboard: Tab to focus, Space toggles.

Props

Props of Checkbox
Prop	Type	Default	What it does
`children`	`ReactNode`		The words. They are the control.
`variant`	`"strike" \| "stet" \| "circled"`	`"strike"`	How checking marks the words. strike: for things done; pointing pencils a hairline through them, checking inks an accent strike that overshoots both ends, and the words step back to pencil. stet: for things kept; the proofreader's "let it stand", a row of dots pencilled under the words on pointing and set down in the accent on checking, while the words turn italic. circled: for things chosen; one pen loop drawn round the words, in pencil on pointing and in the accent on checking, running on past where it began, and the words turn italic.
`checked / defaultChecked / onChange`	`native`		A real checkbox underneath, so every native prop works.
`CheckboxGroup legend`	`ReactNode`		The small label over the list.
`CheckboxGroup tally`	`boolean`	`false`	Show how many are done, as a <Fraction>: each figure that changes turns over on its own wheel, the way the count went.
`CheckboxGroup done`	`(count, total) => ReactNode`		What the tally says after the fraction.
`labelClassName`	`string`		Classes for the visible label wrapper. className goes to the native checkbox.

Craft

Where its move comes from

Where its move comes from
Component	Reference	Move
Checkbox	Weingart letter	The pen overshoots; the tally is a fraction
Stet checkbox	The proofreader's stet	Dots under the words: let it stand
Circled checkbox	Collage accent rings	One pen loop round the words

How it moves

How it moves
Component	Articulation	What moves
Checkbox	Pencil, then ink	A hairline sketch on hover, then the accent strike; the tally's figures turn on their wheels
Stet checkbox	Pencil, then ink	Pointing pencils the dots in; checking sets them down in the accent with spiccato, and the words turn italic
Circled checkbox	Written	Pointing draws the loop in pencil; checking inks it; it fades when it goes