Component

Form character count

Help users enter text when there is a limit on the number of characters they can type

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

You can enter up to 10 characters

How to call this component

<%= render "govuk_publishing_components/components/character_count", {
  textarea: {
    label: {
      text: "Can you provide more detail?"
    },
    name: "more-detail"
  },
  maxlength: 10
} %>

GOV.UK Design System

This component incorporates components from the GOV.UK Design System:

Accessibility acceptance criteria

The component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • be usable with touch
  • indicate when they have focus
  • be recognisable as form textarea elements
  • have correctly associated labels
  • inform the user about the character limit
  • inform the user as the number of left characters changes

Labels use the label component.

Other examples

With hint (preview)

Please include as much information as possible.
You can enter up to 10 characters 
<%= render "govuk_publishing_components/components/character_count", {
  textarea: {
    label: {
      text: "Can you provide more detail?"
    },
    name: "with-hint",
    hint: "Please include as much information as possible."
  },
  maxlength: 10
} %>

With id for textarea (preview)

You can enter up to 10 characters 
<%= render "govuk_publishing_components/components/character_count", {
  textarea: {
    label: {
      text: "What is your quest?"
    },
    name: "with-an-id"
  },
  id: "custom-id",
  maxlength: 10
} %>

With error (preview)

Error: Detail must be 10 characters or less

You can enter up to 10 characters 
<%= render "govuk_publishing_components/components/character_count", {
  textarea: {
    label: {
      text: "Can you provide more detail?"
    },
    name: "more-detail-error",
    error_message: "Detail must be 10 characters or less",
    value: "221B Baker Street
    London
    NW1 6XE
    "
  },
  maxlength: 10
} %>

With word count (preview)

You can enter up to 10 words 
<%= render "govuk_publishing_components/components/character_count", {
  textarea: {
    label: {
      text: "Can you provide more detail?"
    },
    name: "more-detail-value"
  },
  maxwords: 10
} %>

With threshold (preview)

You can enter up to 20 characters 
<%= render "govuk_publishing_components/components/character_count", {
  textarea: {
    label: {
      text: "Can you provide more detail?"
    },
    name: "more-detail-with-threshold"
  },
  threshold: 75,
  maxlength: 20
} %>