shadcn.io is not affiliated with official shadcn/ui
Field examples · Text Areas
Textarea with Detailed Instructions Field for React
An issue report textarea with detailed instructions above it and a numbered-steps placeholder.
Get bug reports people can act on. A FieldDescription above the Issue Description field says what to include, and the placeholder lays out numbered steps, so the Textarea itself shows the expected shape.
Preview
Installation
FAQ
Where do the instructions sit?
FieldDescription is between FieldLabel and Textarea. It asks for the issue, steps to reproduce, and says the team reviews within 24 hours.
How tall is the issue box?
rows is 5. The label is Issue Description, and FieldLabel names the textarea. Its htmlFor matches the control's id.
What does the placeholder show?
The placeholder is a numbered sample that starts 1. I tried to... and continues 2. Then I.... A newline entity in the placeholder string splits those steps, and the sample clears once someone types.
Do the instructions stay visible while typing?
Yes. FieldDescription stays above the box. The numbered sample is only the placeholder.
Related
- Textarea with Description FieldA feedback textarea with a description
- Textarea with Helper Text Above FieldA description textarea with a Markdown
- Simple Textarea FieldA message textarea with its label above it
- Input with Description Below FieldA username input with helper text under it
- Mixed Field Types with SeparatorsA contact fieldset and a textarea divided
- Multiple Textareas - Different Sizes FieldThree textareas of two, four and eight