Switch

Switch is a native checkbox with the switch role. Off, its track is dithered under an ink thumb; on, the track fills with ink and the thumb steps across. 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 { Switch } from "@/components/dithercharts/switch"

<Switch label="Live data" defaultChecked />
<Switch label="Show grid" />
<Switch label="Locked" disabled />

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 switch

Props

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