Textarea
A multi-line text input with support for character counts, auto-resize, validation, and multiple sizes.
Basic
A simple textarea with a label and placeholder.
With Character Count
showCount and maxLength display a live counter — useful for bios and short descriptions.
A short summary shown on recipe cards and search results.
Auto Resize
autoResize grows the textarea as the user types, preventing scroll within the field.
The textarea expands automatically as you type.
Validation
Pass an error string to display inline error feedback beneath the field.
Sizes
Three sizes — sm, md, and lg — to match surrounding UI density.
Recipe Submission Form
A real-world form combining multiple Textarea variants in a cohesive card layout.
Submit a New Recipe
Fill in the details below to share your creation with the Cookest community.
Shown on recipe cards and in search results.
Number your steps for clarity. The field grows as you type.
Optional — a personal touch readers will appreciate.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label displayed above the textarea. |
helperText | string | — | Subtle helper copy rendered below the field. |
error | string | — | Error message shown in red below the field; replaces helperText when present. |
maxLength | number | — | Maximum number of characters allowed. |
showCount | boolean | false | Displays a live character counter. Works best alongside maxLength. |
resize | "none" | "vertical" | "horizontal" | "both" | "vertical" | CSS resize behaviour of the textarea element. |
autoResize | boolean | false | When true, the textarea grows in height automatically as content increases. |
inputSize | "sm" | "md" | "lg" | "md" | Controls the font size and inner padding of the textarea. |
fullWidth | boolean | false | When true, the textarea stretches to fill its container width. |