Skip to content

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

Free

Character Counter Input Group (Text) for Ark UI

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

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 React, Ark UI does not update 0/280 as the person 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">
  <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