Skip to main content
USWDS + Tailwind

Character count

Character count helps users know how much text they can enter when there is a limit on the number of characters.

This component requires the following JavaScript plugins:

Example

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
This is an input with a character counter.
You can enter up to 20 characters
HTML 
<div
  class="max-w-xs"
  data-part="character-count-root"
>
  <label
    data-part="character-count-label"
    for="input-limit"
    class="block"
  >Text input</label>
  <div>
    <span
      id="input-hint"
      class="text-gray-50"
    >This is an input with a character counter.</span>
  </div>
  <div class="mt-2 relative">
    <input
      data-part="character-count-input"
      id="input-limit"
      aria-describedby="input-hint character-count-hint"
      class="p-2 w-full max-w-lg h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4"
      maxlength="20"
    />
  </div>
  <div class="pt-2">
    <span
      id="character-count-hint"
      class="sr-only"
    >You can enter up to 20 characters</span>
    <span
      data-part="character-count-status"
      aria-hidden="true"
      class="text-gray-50 data-[invalid]:text-red-60v data-[invalid]:font-bold"
    >20 characters allowed</span>
    <span data-part="character-count-sr-status"></span>
  </div>
</div>

Component API

Root

  • x-character-count

    Custom Alpine directive that marks the Character Count Root.

Input / Textarea

  • x-character-count:input

    Custom Alpine directive that marks the Character Count Input.

  • maxlength

    Type: number

    Sets the limit on the number of characters allowed in the input. This attribute is validated natively by the browser.

  • aria-describedby

    Type: string

    Accessibility attribute that links various input descriptors to the input itself. This attribute accepts multiple values, seperated by a space.

Hint

A hint is made up of several (seemingly redundant) elements to account for progressive enhancement and assisted technology.

  • id

    Type: string

    Unique value that links static hint element to the input via aria-describedby.

  • x-character-count:status

    Custom Alpine directive that marks the Character Count Status.

  • aria-hidden="true"

    Type: boolean

    Accessibility attribute that hides this element from screen readers.

  • x-character-count:sr-status

    Custom Alpine directive that marks the Character Count Screen Reader Status.

  • aria-live="polite"

    Type: string

    Accessibility attribute that is used to notify screen readers of the current character count status when it is changed.