shadcn.io is not affiliated with official shadcn/ui
Field examples · Text Areas
Simple Textarea Field for React
A message textarea with its label above it.
Framework
UI library
A multi-line field with its label: a FieldLabel above a Textarea for a message, in a Field. Use it wherever the answer is longer than one line.
Preview
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
FAQ
How does the Message label connect?
FieldLabel names the Textarea. Its htmlFor matches the control's id. The label text is Message, and it sits above the box.
How tall is this textarea?
rows is not set, so the height is the browser default. Pass rows on Textarea when you want a set number of lines.
What is the placeholder for?
The placeholder is Type your message here..., and it clears once someone types. This field has no FieldDescription.
Where is the typed text stored?
This textarea does not keep the text in component state. The browser holds what was typed until the form is submitted.
Related
- Textarea with Description FieldA feedback textarea with a description
- Textarea with Character Count FieldA bio textarea with a live count of
- Textarea with Helper Text Above FieldA description textarea with a Markdown
- Simple Input with Label FieldAn email input with its label above it
- Mixed Field Types with SeparatorsA contact fieldset and a textarea divided
- Multiple Textareas - Different Sizes FieldThree textareas of two, four and eight