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 Vue, Ark UI does not keep this count.
Installation
Anatomy
Usage
<Field class="max-w-md">
<FieldLabel>Bio</FieldLabel>
<Textarea
:maxLength="MAX_LENGTH"
@input="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. Field connects the two for you, with no ids to write.
Store the next text from @input.
Where does the count sit?
The order is FieldLabel, Textarea, then FieldDescription. The count stays under the box while someone types.
API Reference
Field
No extra props in this demo. The rest is on the Field page.
Textarea
Sets maxLength="MAX_LENGTH", input="handleChange", placeholder="Tell us about yourself...", rows="4" and value="value". The rest is on the Textarea page.
