shadcn.io is not affiliated with official shadcn/ui
Field examples · Text Areas
Textarea with Helper Text Above Field for React
A description textarea with a Markdown hint between the label and the textarea.
Say the format before people write. The FieldDescription between the Description label and the Textarea notes that Markdown is supported.
Preview
Installation
FAQ
Why is the Markdown note above the box?
FieldDescription sits between FieldLabel and Textarea. It reads Provide a detailed description. Markdown is supported.
How tall is the description box?
rows is 6. The label is Description, and FieldLabel names the textarea. Its htmlFor matches the control's id.
How does the placeholder show more than one line?
The placeholder starts with a heading, then a blank line, then Your description here. The source writes each of those breaks as a newline entity in the placeholder string.
Does this box format Markdown?
The description says Markdown is supported. The control is a Textarea with that sentence above it.
Related
- Simple Textarea FieldA message textarea with its label above it
- Textarea with Description FieldA feedback textarea with a description
- Textarea with Character Count FieldA bio textarea with a live count of
- Input with Description Above FieldA password input with its requirement
- Textarea with Detailed Instructions FieldAn issue report textarea with detailed
- Multiple Textareas - Different Sizes FieldThree textareas of two, four and eight