Adds character counter to TextArea and TextField components#3785
Adds character counter to TextArea and TextField components#3785lindseywild merged 36 commits intomainfrom
Conversation
🦋 Changeset detectedLatest commit: 5a6201b The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| <%= builder.text_area(@input.name, **@input.input_arguments) %> | ||
| <% end %> | ||
| <% if @input.character_limit? %> | ||
| <%= content_tag(:div, **character_limit_validation_arguments, data: { target: "primer-text-area.validationElement" }) do %> |
There was a problem hiding this comment.
We need to define validation because an error needs to appear as a user is making updates. My understanding is that current validation is designed to only show after form submission. Let me know if there is a better way to do this, though!
| <% if @input.character_limit? %> | ||
| <%= content_tag(:div, **character_limit_validation_arguments, data: { target: "primer-text-area.validationElement" }) do %> | ||
| <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span> | ||
| <span data-target="primer-text-area.validationMessageElement"></span> |
There was a problem hiding this comment.
Having our own defined validation message will also "stack" validation messages if there are multiple; thoughts? Is this ok?
|
@jonrohan @dylanatsmith Ok this is ready again for review, PR description, video, & screenshots have been updated! |
|
@lukasoppermann For design input from Primer 👀 |
|
Hey, if it is off by default, it seems fine. One nitpick, could we somehow wrap the count in a span or something so that it does not bounce so much? |
What are you trying to accomplish?
Adds character count functionality to the TextArea and TextField components.
Screenshots
Below is a video showcasing that TextArea and TextField components have an optional
character_limitthat can be passed in as an argument. When a user types, the field is updated with how many characters are left / how many are over. When a user exceeds the limit, the character count text changes to red and an error icon prepends the text.There is also an aria-live region that updates after a slight delay (500ms) when a user finishes typing. This accurately tells screen reader users how many characters they have left / are over, as well as when the input is invalid if they have typed too many characters.
We are also including
sr-onlytext that is associated with the input so that when a user focuses on the input, they hear "You can enter up to X character(s)". This was added because associating the "X character(s) remaining" message was causing duplicate announcements in NVDA and this is the recommended approach.ominous-space-lamp-rrp7x5r5jg525www-4000.app.github.dev_lookbook_inspect_primer_alpha_text_area_playground_character_limit.10.validation_message.-.10.December.2025.mp4
Integration
No - users can migrate to this new API once it's finished but nothing needs to be done in dotcom.
List the issues that this change affects.
Related to https://github.com/github/primer/issues/5937.
Risk Assessment
I chose low risk since we are only adding to the API.
What approach did you choose and why?
Some decisions made w/accessibility in mind:
Anything you want to highlight for special attention from reviewers?
Accessibility
Merge checklist
Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.