shadcn.io is not affiliated with official shadcn/ui
Field examples · Text Areas
Textarea with Character Count Field for React
A bio textarea with a live count of characters used out of 500.
Show how much room is left while people type. The Bio Textarea caps input at 500 characters, and a FieldDescription under it shows the count, updated from the field's value.
Preview
Installation
FAQ
Where does the character count come from?
FieldDescription prints the length of value, then the limit, as a count of characters. It starts at 0 because value starts empty.
What stops the bio at 500 characters?
The textarea's max length is 500, and rows is 4. The placeholder is Tell us about yourself.
How does the count update while typing?
value is the textarea's text, and FieldLabel names it Bio. Its htmlFor matches the control's id.
Store the next text from onChange.
Where does the count sit?
The order is FieldLabel, Textarea, then FieldDescription. The count stays under the box while someone types.
Related
- Simple Textarea FieldA message textarea with its label above it
- Textarea with Description FieldA feedback textarea with a description
- Textarea with Helper Text Above FieldA description textarea with a Markdown
- Input with Description Below FieldA username input with helper text under it
- Simple Slider FieldA volume slider whose description shows
- Multiple Textareas - Different Sizes FieldThree textareas of two, four and eight