Skip to content

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

Free

Textarea with Counter Input Group for Ark UI

A message textarea with a fixed 0/500 count and a Post button in the footer, capped at 500.

Under the textarea, the footer shows 0/500 and a Post button with a send icon. The count stays at 0/500 while someone types. The textarea stops at 500 characters. Post does not send the message.

Use it for a post with a visible limit and one action. A single-line cap fits an Input. In React, Ark UI does not update the count as 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-[100px]"
    maxLength={500}
    placeholder="Write your message..."
  />
  <InputGroupAddon align="block-end">
    <InputGroupText>0/500</InputGroupText>
    <InputGroupButton className="ms-auto" size="sm" variant="default">
      Post
      <SendIcon aria-hidden="true" data-icon="inline-end" />
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

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.

API Reference

Input Group

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

All 39 input group examples