Components
Radio Group
SketchRadioGroup — a set of hand-drawn radio buttons backed by native inputs for full keyboard and screen-reader support.
SketchRadioGroup renders labelled options with a rough.js radio mark — an outer
circle and a filled inner dot for the selected item. A visually-hidden
<input type="radio"> backs each option, so the group works with the keyboard and
assistive technology without any extra wiring. It runs controlled when both value
and onChange are supplied, or uncontrolled otherwise.
Default
import { SketchRadioGroup } from "blackchalk";import { useState } from "react";const options = [{ label: "Free", value: "free" },{ label: "Pro", value: "pro" },{ label: "Team", value: "team" },];export default function Demo() {const [plan, setPlan] = useState("free");return ( <SketchRadioGroup name="plan" options={options} value={plan} onChange={setPlan} />);}Horizontal
Pass orientation="horizontal" to lay the options out in a row.
<SketchRadioGroupname="plan"options={options}value={plan}onChange={setPlan}orientation="horizontal"/>Props
| Prop | Type | Default |
|---|---|---|
name | string | — |
options | SketchRadioOption[] | — |
value | string | — |
onChange | (value: string) => void | — |
orientation | "vertical" | "horizontal" | "vertical" |
style | CSSProperties | — |
SketchRadioOption
| Field | Type | Default |
|---|---|---|
label | string | — |
value | string | — |
disabled | boolean | — |
See it in the Storybook playground, or read the source.