shadcn.io is an independent project built on shadcn/ui
Bio starts empty, with 0/50 beside the label. The placeholder is Tell us about yourself. Typing updates the count, and the field stops at 50 characters.
Use it for a bio, a title, or a caption with a hard limit. The count is not announced on every key. Explain the limit in words on the Field if the number is not enough. In React, Ark UI does not keep this count.
Installation
Anatomy
Usage
<Field className="w-full max-w-sm">
<div className="flex items-center justify-between">
<FieldLabel>Bio</FieldLabel>
<span className="text-muted-foreground text-xs">
{value.length}/{MAX_LENGTH}
</span>
</div>
<Input
className="bg-background"
maxLength={MAX_LENGTH}
onChange={handleChange}
placeholder="Tell us about yourself"
type="text"
value={value}
/>
</Field>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.
API Reference
Field
No extra props in this demo. The rest is on the Field page.
Input
Sets maxLength={MAX_LENGTH}, onChange={handleChange}, placeholder="Tell us about yourself", type="text" and value={value}. The rest is on the Input page.
