shadcn.io is an independent project built on shadcn/ui
Bio sits above a four-row box. The placeholder is Tell us about yourself... The box stops at 500 characters. Under it, the count starts at 0/500 characters and follows what was typed.
Save it for a bio or caption with a hard limit. The same limit on one line is an Input. On React, Base UI does not keep this count.
Installation
Anatomy
Usage
<Field className="max-w-md">
<FieldLabel htmlFor="profile-bio-bio">Bio</FieldLabel>
<Textarea
id="profile-bio-bio"
maxLength={MAX_LENGTH}
onChange={handleChange}
placeholder="Tell us about yourself..."
rows={4}
value={value}
/>
<FieldDescription>
{value.length}/{MAX_LENGTH} characters
</FieldDescription>
</Field>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.
API Reference
Field
Sets htmlFor="profile-bio-bio". The rest is on the Field page.
Textarea
Sets id="profile-bio-bio", maxLength={MAX_LENGTH}, onChange={handleChange}, placeholder="Tell us about yourself...", rows={4} and value={value}. The rest is on the Textarea page.
