Radio

Sketch circle with a solid inner dot when selected. Must live inside RadioGroup. The ring draws in on mount; the dot scales and draws in on select.

PenPencil

Roughness1.5Lock seedAnimate

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

CLI install

npx doodleui-react add radio

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.
animate	boolean	true	Draw-in the ring on mount. Dot scales and draws in on select. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate.
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.