104Get started
HextaUI

Field: Character count

<FieldCounter /> finds the text control in its field and counts against its maxLength. It only listens, so typing is never slowed or changed.

Clears after 24 hours.

import {
  Field,
  FieldCounter,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldCounterDemo() {
  return (
    <Field className="max-w-sm">
      <FieldLabel>Status</FieldLabel>
      <Input defaultValue="Shipping the field rework" maxLength={40} />
      <div className="flex items-baseline justify-between gap-3">
        <FieldDescription>Clears after 24 hours.</FieldDescription>
        <FieldCounter />
      </div>
    </Field>
  )
}

Add this example

This adds the example as components/examples/field/counter.tsx, together with the Field component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/field-counter.json

To add only the component, follow the Field installation.

More Field examples

See them all, with keyboard support and accessibility notes, on the Field page.

Related components