Textareashadcn
Several lines of text.
Inputs- Install
- npx shadcn add textarea
- Import from
- @/components/ui/textarea
- Guidance
- draft · v0.1.0
Examples
As installed from shadcn – rendering in jsp-ds tokens through the bridge.
Up to 500 characters. Reviewers see it beside the screen.
Guidance
When to use
- Several lines of free text: comments, descriptions, notes.
Rules
- A visible label, and help text that sets expectations (length, what to include).
- If there's a limit, show it before people reach it.
- Don't use it for structured data – use separate fields.
Spec
The variables this component reads, and the jsp-ds token behind each, resolved live. Switch mode to see them change.
| Token | CSS variable | Value now |
|---|---|---|
| color.border.subtleBorder (ISS-16) | --input | … |
| color.focus.ring | --ring | … |
| color.text.subtlePlaceholder and help text | --muted-foreground | … |
| color.action.destructive.textInvalid | --destructive | … |
| radius.md | --radius-md | … |
Install
Terminal
npx shadcn add textareaImport
import { Textarea } from "@/components/ui/textarea"From shadcn’s own registry. Don’t edit the installed file – jsp-ds styles it through the bridge, and fixes go in styles/overrides.css with an issue.