Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input Group examples · Custom

Textarea with Counter Input Group for React

A message textarea with a 500-character limit and a Post button under it.

Framework
UI library

A post composer with its limit in view: under the textarea, InputGroupText shows 0/500 and a Post button with a send icon sits at the end. maxLength on the textarea enforces the limit.

Preview

Preview width

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

What enforces the 500-character limit?

maxLength={500} on InputGroupTextarea: the browser stops input at 500 characters.

Does 0/500 update as people type?

No, it's fixed text. Keep the textarea's value in state and render its length, as in the Field gallery's Textarea with Character Count.

How are the count and the button laid out?

Both sit in one block-end InputGroupAddon. The count comes first and ms-auto on the button pushes it to the end.

How is the send icon placed in the button?

After the text, with data-icon="inline-end" so the button spaces it as a trailing icon.

Does Post submit a form?

Only with type="submit" inside a form; InputGroupButton defaults to type="button".

How do screen readers hear the limit?

The count is plain text in the group. To announce it while typing, tie it to the textarea with aria-describedby or put it in a polite live region.

All 39 input group examples