Input

Single-line text field with a sketchy border. Native focus rings are removed. Focus thickens the sketch stroke and shifts it toward the accent color.

Roughness1.5Lock seed

<Input label="Email" placeholder="you@studio.dev" roughness={1.5} />

Usage

import { Input } from "doodleui-react";

<Input label="Email" placeholder="you@studio.dev" />

Pass a label instead of using placeholder-as-label. All native input attributes (type, name, autoComplete, onChange) forward to the control.

Props

Prop	Type	Default	Notes
label	ReactNode	undefined	Optional label rendered above the field.
placeholder	string	undefined	Native placeholder. Not a substitute for label.
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.