Radio

Sketch circle with a solid inner dot when selected. Must live inside RadioGroup.

PenPencil

Roughness1.5Lock seed

<RadioGroup defaultValue="pen">
  <Radio value="pen" label="Pen" roughness={1.5} />
  <Radio value="pencil" label="Pencil" roughness={1.5} />
</RadioGroup>

Usage

import { RadioGroup, Radio } from "doodleui-react";

<RadioGroup defaultValue="pen">
  <Radio value="pen" label="Pen" />
  <Radio value="pencil" label="Pencil" />
</RadioGroup>

Props

RadioGroup accepts the Radix root API (value, onValueChange, orientation, disabled). Sketch props live on each Radio.

Prop	Type	Default	Notes
value	string	required	Value within RadioGroup.
label	ReactNode	undefined	Caption sitting to the right of the circle.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.