Components
Icon Radio Group
SketchIconRadioGroup — a hand-drawn icon-and-label radio selector that works controlled or uncontrolled.
SketchIconRadioGroup renders a row (or responsive grid) of sketchy card tiles, each
showing an icon and label. Clicking a tile selects it. It is self-managing in static
sketches — pass both value and onChange to take full control.
Default
import { SketchIconRadioGroup } from "blackchalk";<SketchIconRadioGroupname="layout"options={[ { icon: <span>▦</span>, label: "Grid", value: "grid" }, { icon: <span>≣</span>, label: "List", value: "list" }, { icon: <span>▭</span>, label: "Cards", value: "cards" },]}/>Grid layout
Set grid to fill a container with evenly-sized tiles. Wrap it to control the width.
import { SketchIconRadioGroup } from "blackchalk";<div style={{ width: 360, maxWidth: "100%" }}><SketchIconRadioGroup name="size" grid options={[ { label: "XS", value: "xs" }, { label: "S", value: "s" }, { label: "M", value: "m" }, { label: "L", value: "l" }, ]}/></div>Props
| Prop | Type | Default |
|---|---|---|
name | string | — |
options | { icon?: ReactNode, label: string, value: string }[] | — |
value | string | — |
onChange | (value: string) => void | — |
grid | boolean | — |
See it in the Storybook playground, or read the source.