Do screen readers hear the count?

Not unless you tie it in: give the count an id and set aria-describedby on the input.

shadcn.io is not affiliated with official shadcn/ui

Character Counter Input Group (Text) for React

maxLength={280} on InputGroupInput.

An InputGroupAddon with align="inline-end", after the input.

Switch the count to text-destructive past a threshold, from the same state.

A tweet input with a 280-character limit shown at its end.

A single-line post field with its limit in view: 0/280 sits at the end of the input in an InputGroupText, and maxLength stops typing at 280.

PreviewCode

0/280

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

maxLength={280} on InputGroupInput.

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

An InputGroupAddon with align="inline-end", after the input.

Switch the count to text-destructive past a threshold, from the same state.

aria-label="Tweet".