Label

A thin, mostly-typographic wrapper around Radix Label. Ties a caption to a form field via htmlFor. The only sketch chrome is a small hand-drawn dot after the text when required is set.

Roughness1.5Lock seedRequiredAnimate

<Label htmlFor="email" required={true} roughness={1.5}>
  Email
</Label>
<Input id="email" placeholder="you@studio.dev" />

CLI install

npx doodleui-react add label

Usage

import { Label, Input } from "doodleui-react";

<Label htmlFor="email" required>
  Email
</Label>
<Input id="email" placeholder="you@studio.dev" />

Text stays real HTML — only the required mark is drawn.

Props

Prop	Type	Default	Notes
htmlFor	string	undefined	Ties the label to a field's id, same as the native attribute.
required	boolean	false	Adds a small hand-drawn accent dot after the text.
animate	boolean	true	Draw-in the required mark on mount. 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.