Adds character counts to TextArea and TextInput components #7293

lindseywild · 2025-12-09T18:00:40Z

Related to https://github.com/github/primer/issues/5937.

Below is a video showcasing that TextArea and TextField components have an optional characterLimit that can be passed in as a prop. 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-only text 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.

Components._.Textarea._.Features.-.With.Character.Limit.Storybook.-.19.December.2025.mp4

Changelog

New

Adds characterLimit prop to TextArea
Adds characterLimit prop to TextInput
Adds shared character_counter.ts functionality

Changed

Removed

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

…ents

changeset-bot · 2025-12-09T18:00:44Z

🦋 Changeset detected

Latest commit: dbf0f21

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

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

github-actions · 2025-12-09T18:01:18Z

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

lindseywild · 2025-12-19T16:25:04Z

packages/react/src/Textarea/Textarea.tsx

+            {...rest}
+            aria-describedby={
+              characterLimit
+                ? [characterCountStaticMessageId, rest['aria-describedby']].filter(Boolean).join(' ') || undefined


We needed to add the characterCountStaticMessageId as an aria-describedby ID to ensure that the user is getting the information about the character limit.

lindseywild · 2025-12-19T16:25:42Z

packages/react/src/Textarea/Textarea.tsx

+            <VisuallyHidden id={characterCountLiveRegionId} aria-live="polite" role="status">
+              {screenReaderMessage}
+            </VisuallyHidden>
+            <VisuallyHidden id={characterCountStaticMessageId}>


This is hidden as we want to include it for screen reader users, but including the actual character counter span that updates when a user types was causing double announcements.

lindseywild · 2025-12-19T16:27:04Z

packages/react/src/TextInput/TextInput.tsx

-        <UnstyledTextInput
-          // @ts-expect-error it needs a non nullable ref
-          ref={inputRef}
+      <>


I just wrapped the <TextInputWrapper> in an empty <> since we're adding another sibling component. I'll call out specific changes within this part of the diff!

siddharthkp

Trust you with the implementation overall. Left a couple small nits.

Next steps:

Add e2e tests + add update snapshots label
Run integration tests

packages/react/src/Textarea/Textarea.features.stories.tsx

siddharthkp · 2025-12-19T18:29:42Z

packages/react/src/TextInput/TextInput.tsx

    const [isInputFocused, setIsInputFocused] = useState<boolean>(false)
    const inputRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement | null>)
+    const [characterCount, setCharacterCount] = useState<string>('')
+    const [isOverLimit, setIsOverLimit] = useState<boolean>(false)


nit: Can this be inferred instead of stored in state? Might save us a re-render?

const isOverLimit = characterCount > characterLimit

I tried storing it both as a ref and a constant and updating it in a useEffect, but since it needs to update on every keystroke it wasn't quite working for me. Do you have another suggestion or do you think it's ok as-is? I see you added it's a "nit" so wanted to check!

yep, called it a nit because I assumed you must have had a reason.

but since it needs to update on every keystroke it wasn't quite working for me.

that's odd, I assumed setCharacterCount would cause a re-render which can be used to calculate isOverLimit.

anywho, not ideal but also not blocking

packages/react/src/Textarea/TextArea.module.css

packages/react/src/TextInput/TextInput.module.css

primer-integration · 2025-12-19T19:13:03Z

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/9302

primer-integration · 2025-12-19T19:17:17Z

🔬 github-ui Integration Test Results

Check	Status	Details
CI	⏳ Pending	Waiting for workflow to complete
Projects (Memex)	✅ Passed	View run
VRT	✅ Passed	View run

siddharthkp · 2025-12-20T06:11:38Z

I see that one of the checks is still pending here but completed in the integration branch 🤔

Going to add integration-tests: skipped manually because I confirmed it passed on the integration PR, it's just reporting correctly.

Initial work to add character counts to TextArea and TextInput compon…

4856975

…ents

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Dec 9, 2025

lindseywild deployed to github-pages December 9, 2025 18:10 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7293 December 9, 2025 18:11 Inactive

Minor updates

514a9f6

lindseywild deployed to github-pages December 9, 2025 19:41 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7293 December 9, 2025 19:42 Inactive

lindseywild added 2 commits December 18, 2025 15:37

Fixes aria-describedby, also updates validation to match PVC component

f5a4bbc

Updates tests

463bb81

github-actions bot requested a deployment to storybook-preview-7293 December 18, 2025 15:49 Abandoned

Reverts describedby but includes new static message

2a2418f

github-actions bot temporarily deployed to storybook-preview-7293 December 18, 2025 16:01 Inactive

lindseywild deployed to github-pages December 18, 2025 16:11 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7293 December 18, 2025 16:11 Inactive

Reverts snaphshots

e565231

lindseywild deployed to github-pages December 18, 2025 16:27 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7293 December 18, 2025 16:27 Inactive

lindseywild added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Dec 18, 2025

github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Dec 18, 2025

lindseywild added 2 commits December 18, 2025 15:47

Merge branch 'main' into lw/adds-character-counts

04a5a18

Updates snapshot

c84ab44

github-actions bot temporarily deployed to storybook-preview-7293 December 18, 2025 20:58 Inactive

lindseywild deployed to github-pages December 18, 2025 21:08 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7293 December 18, 2025 21:08 Inactive

Updates snapshot tests

f482e08

lindseywild commented Dec 19, 2025

View reviewed changes

Updates docs with new props

1318829

lindseywild deployed to github-pages December 19, 2025 17:15 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7293 December 19, 2025 17:15 Inactive

lindseywild added 2 commits December 19, 2025 17:22

Some copilot feedback

aaccacf

More copilot suggestions

130b2b8

github-actions bot temporarily deployed to storybook-preview-7293 December 19, 2025 17:32 Inactive

Reverts some changes as it was announcing the SR announcement on load

c5ef2a8

github-actions bot requested a deployment to storybook-preview-7293 December 19, 2025 17:42 Abandoned

lindseywild had a problem deploying to github-pages December 19, 2025 17:49 — with GitHub Actions Failure

github-actions bot requested a deployment to storybook-preview-7293 December 19, 2025 17:49 Abandoned

oops accidentally committed a git command

406f86b

lindseywild deployed to github-pages December 19, 2025 18:09 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7293 December 19, 2025 18:09 Inactive

lindseywild marked this pull request as ready for review December 19, 2025 18:26

siddharthkp reviewed Dec 19, 2025

View reviewed changes

Adds e2e tests, updates CSS variable

fa0562b

lindseywild added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Dec 19, 2025

lindseywild deployed to github-pages December 19, 2025 19:01 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7293 December 19, 2025 19:01 Inactive

test(vrt): update snapshots

dbf0f21

primer bot requested a review from a team as a code owner December 19, 2025 19:02

github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Dec 19, 2025

primer bot deployed to github-pages December 19, 2025 19:12 View deployment

github-actions bot deployed to storybook-preview-7293 December 19, 2025 19:12 View deployment

lindseywild requested a review from siddharthkp December 19, 2025 19:36

siddharthkp added the integration-tests: skipped manually Changes in this PR do not require an integration test label Dec 20, 2025

siddharthkp approved these changes Dec 20, 2025

View reviewed changes

Adds character counts to TextArea and TextInput components #7293

Are you sure you want to change the base?

Adds character counts to TextArea and TextInput components #7293

Uh oh!

Conversation

lindseywild commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Dec 9, 2025

Uh oh!

lindseywild Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

lindseywild Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

lindseywild Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

siddharthkp left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

siddharthkp Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

lindseywild Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

siddharthkp Dec 20, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

primer-integration bot commented Dec 19, 2025

Uh oh!

primer-integration bot commented Dec 19, 2025

🔬 github-ui Integration Test Results

Uh oh!

siddharthkp commented Dec 20, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

lindseywild commented Dec 9, 2025 •

edited

Loading

changeset-bot bot commented Dec 9, 2025 •

edited

Loading