Skip to content

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

Free

Character Counter Input Group (Textarea) for React

A message textarea with a fixed 0/500 in a footer row, and typing stops at 500 characters.

A message box has a footer under the text, with a line between them. The footer shows 0/500 at its end. The count does not change while someone types. The textarea stops at 500 characters.

Use it for a comment that must stay under 500 characters. A single-line cap fits an Input better. In React, Base UI does not recount 0/500 while someone types.

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

Anatomy

Input Group anatomy: root, addon, input, text, button

Usage

<InputGroup className="w-full max-w-sm bg-background">
  <InputGroupTextarea
    aria-label="Message"
    className="min-h-[120px]"
    maxLength={500}
    placeholder="Enter your message..."
  />
  <InputGroupAddon align="block-end" className="border-t">
    <InputGroupText className="ms-auto">0/500</InputGroupText>
  </InputGroupAddon>
</InputGroup>

FAQ

How is the footer row built?

An InputGroupAddon with align="block-end" and border-t, after the textarea. ms-auto on the count pushes it to the end.

What stops typing at 500?

maxLength={500} on InputGroupTextarea.

Does 0/500 count characters?

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

How tall is the textarea?

At least 120 pixels from min-h-[120px], growing with its content.

Is the count announced?

Only if you tie it in with aria-describedby on the textarea.

How is the textarea labeled?

aria-label="Message".

API Reference

Input Group

Sets aria-label="Message", maxLength={500}, placeholder="Enter your message..." and align="block-end". The rest is on the Input Group page.

All 39 input group examples