Components
Toggle
SketchToggle — a hand-drawn on/off switch with animated knob.
SketchToggle renders a rough.js pill track with a spring-animated knob. It
works uncontrolled (flips its own state) or fully controlled when you pass
onChange.
Default
import { SketchToggle } from "blackchalk";<SketchToggle checked={false} aria-label="Toggle" />With label
import { SketchToggle } from "blackchalk";import { useState } from "react";export function Demo() {const [on, setOn] = useState(false);return <SketchToggle checked={on} onChange={setOn} label="Dark mode" />;}Props
| Prop | Type | Default |
|---|---|---|
checked | boolean | false |
onChange | (checked: boolean) => void | — |
label | ReactNode | — |
disabled | boolean | — |
id | string | — |
aria-label | string | — |
className | string | — |
style | CSSProperties | — |
See it in the Storybook playground, or read the source.