Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Label with Character Count for Svelte

A Bio label at the start of the row, with the muted count 0/500 aligned to the other end of it.

UI library: Ark UI

Bio sits at the start of a row. At the other end, muted text reads 0/500.

Show a count beside the label for a short field with a limit, such as a bio. Put the count under a Textarea when the field is tall. On Svelte, Ark UI does not count the characters.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Label anatomy: label, control, text

Usage

<div class="flex items-center justify-between gap-2"><Label>Bio</Label><span class="text-muted-foreground text-xs">0/500</span></div>

FAQ

Does 0/500 update as someone types?

No. It is a static span whose text is 0/500. The file has no input and no state. Keep the field's length in state and render that number if the count should follow typing.

How is the count aligned with Bio?

A row with flex items-center justify-between gap-2. Label is one child and the span is the other, so the count sits at the far end of the row.

How is the count styled?

text-muted-foreground text-xs on the span. The label keeps the default medium caption. The span is not inside the Label.

What format is the number in?

The literal string 0/500: a count, a slash, then the limit. Nothing in the file changes that wording.

Does the label stop input at 500 characters?

No. 500 is only text in the span. This file does not render a field, so it does not set a limit on one.

How do I tie the Bio label to a textarea?

Give the textarea an id and point the label at it. The count can stay the sibling span it is here. Set for to the textarea's id.

API Reference

Label

No extra props in this demo. The rest is on the Label page.

All 8 label examples