Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Label examples · Standard

Label with Character Count for React

A label with a character count aligned to the other end of the row.

Framework
UI library

Show a length limit before anyone hits it. The Label says Bio and a muted 0/500 sits at the far end of the same row, so the count stays out of the caption. The number is static here: drive it from the field's value in your form.

Preview

Preview width
0/500

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

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 htmlFor to the textarea's id.

All 8 label examples