Input

Single-line text field with a sketchy border. Native focus rings are removed. Focus re-inks the border with a second seed (and still shifts the stroke toward the accent color).

Roughness1.5Lock seedAnimate

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

CLI install

npx doodleui-react add input

Usage

import { Input } from "doodleui-react";

<Input label="Email" placeholder="you@studio.dev" />
<Input size="lg" startIcon={<Icon />} label="Search" />
<Input error="Required" label="Email" />

Pass a label instead of using placeholder-as-label. All native input attributes (type, name, autoComplete, onChange) forward to the control — compatible with react-hook-form register(). See Forms.

Props

Prop	Type	Default	Notes
label	ReactNode	undefined	Optional label rendered above the field.
placeholder	string	undefined	Native placeholder. Not a substitute for label.
animate	boolean	true	Draw-in the border on mount. Seed-morph on focus. 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.