Textarea
Same treatment as Input, sized for longer notes. The sketch rectangle resizes with the element. Focus re-inks the border with a second seed.
<Textarea label="Note" placeholder="Scratch something down" roughness={1.5} />CLI install
npx doodleui-react add textarea
Usage
import { Textarea } from "doodleui-react";
<Textarea label="Note" rows={5} />
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| label | ReactNode | undefined | Optional label rendered above the field. |
| rows | number | 4 | Visible line count. |
| 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. |