shadcn.io is not affiliated with official shadcn/ui
Field examples · Text Areas
Multiple Textareas - Different Sizes Field for React
Three textareas of two, four and eight rows, sized to the text each one expects.
Size a textarea to the answer you expect. Short Note has two rows, Comment four and Essay eight, set with rows on each Textarea, so the box itself tells people how much to write.
Preview
Installation
FAQ
How tall is each textarea?
Short Note sets rows to 2, Comment sets rows to 4, and Essay sets rows to 8. Each one is its own Field in a FieldGroup.
What are the placeholders?
They are Brief note..., Your comment..., and Write your essay.... Each placeholder clears once someone types in that box.
How do the labels connect?
FieldLabel names that Textarea. Its htmlFor matches the control's id. The labels are Short Note, Comment, and Essay.
What stacks the three boxes?
FieldGroup stacks them in one column, capped with max-w-md. None of the fields set orientation, so each label stays above its box.
Related
- Simple Textarea FieldA message textarea with its label above it
- Textarea with Description FieldA feedback textarea with a description
- Multiple Inputs in Group FieldFirst name, last name and email inputs
- Complex Multi-Field FormA personal information fieldset with
- Fieldset with LegendAn address fieldset with a legend, a
- Textarea with Character Count FieldA bio textarea with a live count of