Checkbox

Checkbox is a native checkbox drawn as a square pixel box. Hover dithers it, checking fills it with ink and a pixel check, and indeterminate shows a bar. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

import "@/components/dithercharts/controls.css"
import { Checkbox } from "@/components/dithercharts/checkbox"

<Checkbox label="Email me" defaultChecked />
<Checkbox label="Weekly digest" />
<Checkbox label="Some regions" indeterminate />
<Checkbox label="Locked" disabled defaultChecked />

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add checkbox

Props

It renders a native element, so every other attribute that element takes passes through.