shadcn.io is not affiliated with official shadcn/ui
Input examples · Standard
Input with Character Counter for React
A field that counts the characters typed against its limit.
A limit is easier to respect when you can see it. This example shows a count like 12/50 beside the Bio label, updating as people type, and sets maxLength on the input so it stops at 50 characters. Use it for bios, titles, captions and anything with a length limit.
Preview
Installation
FAQ
How does the counter update?
The text lives in state and the counter shows its length over the limit. Each keystroke updates the state, so the count follows every character typed or deleted.
What stops typing at 50 characters?
maxLength on the input, set from the MAX_LENGTH constant. The browser refuses further characters, and pasted text is cut at the limit.
How is the counter placed?
The label and the counter share a row with justify-between, so the count sits at the end, opposite the label. It's text-xs and text-muted-foreground.
Can the counter warn near the limit?
Yes. Switch its class when the length gets close, for example to text-destructive from 45 characters, so the warning shows before the field stops accepting text.
Related
- Input with LabelA text input with a label above it
- Input with Helper TextAn email field with helper text under it
- Min/Max Length Validation FormA username of 3 to 20 characters and a
- Textarea with Character Count FieldA bio textarea with a live count of
- Input with DescriptionA field with a description between its
- Required LabelA label with a destructive asterisk that