Skip to content

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

Free

Character Counter Input Group (Text) for Vue

A single-line tweet field that shows a fixed 0/280 at the end and stops further typing at 280.

UI library: Ark UI

A tweet field shows 0/280 at its end. That count is fixed text, so it stays at zero while someone types. The field itself stops accepting characters at 280.

Use it when a short post has a hard cap and you will render the live count yourself. A longer note belongs in a Textarea. In Vue, Ark UI does not update 0/280 as the person 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">
  <InputGroupInput
    aria-label="Tweet"
    :maxLength="280"
    placeholder="Enter tweet..."
    type="text"
  />
  <InputGroupAddon align="inline-end">
    <InputGroupText>0/280</InputGroupText>
  </InputGroupAddon>
</InputGroup>

FAQ

What enforces the limit?

maxLength={280} on InputGroupInput.

Does 0/280 count as people type?

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

How does the count sit at the end?

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

How do I warn near the limit?

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

Do screen readers hear the count?

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

How is the input labeled?

aria-label="Tweet".

API Reference

Input Group

Sets aria-label="Tweet", maxLength="280", placeholder="Enter tweet...", type="text" and align="inline-end". The rest is on the Input Group page.

All 39 input group examples