Skip to content

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

Free

Character Counter Input Group (Textarea) for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not recount 0/500 while someone types.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<InputGroup class="w-full max-w-sm bg-background">
  <InputGroupTextarea
    aria-label="Message"
    class="min-h-[120px]"
    :maxLength="500"
    placeholder="Enter your message..."
  />
  <InputGroupAddon align="block-end" class="border-t">
    <InputGroupText class="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