Character ring

When to use #

Use it for

Posts, messages and descriptions with a hard limit.
Compact composers where a full counter is too loud.

Skip it when

Soft limits; a plain counter is enough.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/character-ring.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useState } from "react"
import { CharacterRing } from "@/components/ui/character-ring"
import { Textarea } from "@/components/ui/textarea"

export function CharacterRingDemo() {
  const [text, setText] = useState("Shipping today: multi-currency matching, faster bank feeds and IBAN rules. Read the notes");
  return (
    <div className="grid w-full max-w-md gap-2">
      <label htmlFor="ring-post" className="text-sm font-medium">Post</label>
      <Textarea id="ring-post" value={text} onChange={(event) => setText(event.target.value)} rows={3} />
      <div className="flex justify-end"><CharacterRing length={text.length} max={100} /></div>
    </div>
  );
}

API reference #

CharacterRing

component

PropTypeDefaultDescription

length *number—Characters typed so far.

max *number—

warnAtnumber20Characters left at which it starts counting down.

sizenumber22

classNamestring—

It is built on native elements and keeps aria-hidden and aria-live in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.