Skip to main content
Logo 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 25 characters You can enter up to 25 characters
Twig 
<div class="max-w-xs" x-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 x-character-count:input maxlength="25" 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 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v invalid:ring-4 invalid:ring-red-60v invalid:border-transparent invalid:outline-offset-4 valid:ring-4 valid:ring-green-cool-40v valid:border-transparent valid:outline-offset-4"/>
	</div>
	<div class="pt-2">
		<span id="character-count-hint" class="sr-only">You can enter up to 25 characters</span>
		<span x-character-count:status aria-hidden="true" class="text-gray-50 invalid:text-red-60v invalid:font-bold">You can enter up to 25 characters</span>
		<span x-character-count:sr-status aria-live="polite" class="sr-only">You can enter up to 25 characters</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.