How do I make screen readers hear the count?

Give the count an id and point the input's aria-describedby at it.

shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input Group examples · Label

Label with Counter Input Group for React

Q: How do the label and the count share the header?

Both sit in one block-start InputGroupAddon; ms-auto on the count pushes it to the end.

Q: What stops typing at 60 characters?

maxLength={60} on InputGroupInput.

Q: How is the label tied to the input?

htmlFor on Label matches the input's id.

Q: Why is the count lighter than the label?

Addon text is muted; the label gets text-foreground, the count keeps the muted color.

A title input with its label and a 60-character limit in a header row.

A title field with its limit beside its label: the header row holds the Title Label and an InputGroupText reading 0/60 at the end, and maxLength on the input enforces the limit.

PreviewCode

Title0/60

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

FAQ

How do the label and the count share the header?

Both sit in one block-start InputGroupAddon; ms-auto on the count pushes it to the end.

What stops typing at 60 characters?

maxLength={60} on InputGroupInput.

Does 0/60 update?

No, it's fixed text. Keep the value in state and render its length there.

How is the label tied to the input?

htmlFor on Label matches the input's id.

Why is the count lighter than the label?

Addon text is muted; the label gets text-foreground, the count keeps the muted color.

All 39 input group examples

Preview