Textarea
Textarea lets people enter and edit longer, multi-line text.
Textarea shares Input's look: a stroke-accessible bottom border and a brand bar that grows from the middle on focus. Put it in a Field for a label, hint and validation; set resize to let people drag it larger.
List the steps to reproduce it.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Textarea, Field } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Appearance
outline (default), filled-darker, filled-lighter. Use the filled styles on a contrasting colored background.
Size
small, medium, large. Changes the font size, padding and minimum height.
Resize
none (default), vertical, horizontal, both.
Notes can't be empty.
Validation & disabled
Field passes aria-invalid / disabled down to the Textarea.
Usage
Do
- Use it for content that can run longer than one line (descriptions, feedback, notes).
- Allow vertical resize when the length of the content is hard to predict.
- State the character limit in hint, if there is one.
Don't
- Don't use Textarea for single-line data such as a name or email. Use Input.
- Don't make a Textarea so short that people have to scroll right away.
Props
| Prop · Type | Default | Description |
|---|---|---|
| appearance"outline" | "filled-darker" | "filled-lighter" | Default: "outline" | Input style. |
| size"small" | "medium" | "large" | Default: "medium" | Font size, padding and minimum height 40 / 52 / 64px. |
| resize"none" | "vertical" | "horizontal" | "both" | Default: "none" | Directions people can resize it in. |
| classNamestring | Default: — | Class for the outer wrapper (set the width here). |
| textareaClassNamestring | Default: — | Class for the textarea element itself. |
| value, onChange, rows…TextareaHTMLAttributes | Default: — | Native textarea attributes. |