shadcn.io is not affiliated with official shadcn/ui
Field examples · Text Areas
Textarea with Description Field for React
A feedback textarea with a description below it.
Framework
UI library
A Textarea with a note under it: the Feedback field is followed by a FieldDescription that invites people to share their thoughts about the service.
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
Where does the helper text sit?
The order is FieldLabel, Textarea, then FieldDescription. The description reads Share your thoughts about our service.
How tall is the feedback box?
rows is 4. The placeholder is Your feedback helps us improve..., and it clears once someone types.
How does the Feedback label connect?
FieldLabel names the Textarea. Its htmlFor matches the control's id. The label text is Feedback.
Does the description stay while someone types?
Yes. FieldDescription stays under the box. The placeholder is the only text that clears on input.
Related
- Simple Textarea FieldA message textarea with its label above it
- Textarea with Character Count FieldA bio textarea with a live count of
- Textarea with Helper Text Above FieldA description textarea with a Markdown
- Input with Description Below FieldA username input with helper text under it
- Textarea with Detailed Instructions FieldAn issue report textarea with detailed
- Multiple Textareas - Different Sizes FieldThree textareas of two, four and eight