feat(number-input): matches parity on WC type='text', custom validations, format options by devadula-nandan · Pull Request #21681 · carbon-design-system/carbon

devadula-nandan · 2026-02-27T08:54:34Z

Closes #19848, #21663

matches parity on WC number-input with
#19471
#19742
#21135
and formatOptions

Changelog

New

Added new stories With Type Of Text, With Type Of Text Controlled, With Type Of Custom Validation. same as react.
Brings in parity with WC number-input from mentioned work on React NumberInput. more below.
Support for locale based user input and formatting in NumberInput w/ @internationalized/number
Props to NumberInput: type, locale, formatOptions, pattern, inputMode
A large new suite of tests covering all this
German locale option to the switcher in the storybook toolbar
Harden existing logic to guard against NaN values
Update the event detail value to be a Number, not the locale-formatted string. with strict typing
Ensure onBlur is called when the input is blurred, and also when stepper buttons are blurred
Enhanced number parsing and validation to support all major Unicode numeral systems recognized by Intl.NumberFormat.

Changed

fixes skeleton not rendering for number input. along with skeleton sizes
fixes storybook global controls for locale. which should now work on all provided options. English, German, Arabic, Japanese.

Removed

Removed playground story and enabled all controls to default story. any other story controls will be covered in [NumberInput]: add controls args to every story #20939

Testing / Reviewing

all tests referenced from mentioned pr's were added with patch coverage of 98%.
can also be tested manually by enabling the hidden test story which covers all cases for type="text"

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

Reviewed every line of the diff
Updated documentation and storybook examples
Wrote passing tests that cover this change
~~- [ ] Addressed any impact on accessibility (a11y)~~
Tested for cross-browser consistency
Validated that this code is ready for review and status checks should pass

More details can be found in the pull request guide

netlify · 2026-02-27T08:59:21Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`67f1ca0`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/69d66f40eb03ad0008793183
😎 Deploy Preview	https://deploy-preview-21681--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

codecov · 2026-03-02T09:51:10Z

Codecov Report

❌ Patch coverage is 98.04217% with 13 lines in your changes missing coverage. Please review.
✅ Project coverage is 94.89%. Comparing base (9376495) to head (67f1ca0).
⚠️ Report is 2 commits behind head on main.

Files with missing lines	Patch %	Lines
...onents/src/components/number-input/number-input.ts	97.96%	13 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##             main   #21681    +/-   ##
========================================
  Coverage   94.89%   94.89%            
========================================
  Files         539      539            
  Lines       44549    45102   +553     
  Branches     6291     6313    +22     
========================================
+ Hits        42274    42801   +527     
- Misses       2143     2169    +26     
  Partials      132      132

Flag	Coverage Δ
main-packages	`89.15% <ø> (ø)`
web-components	`97.70% <98.04%> (-0.01%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

netlify · 2026-03-02T12:15:34Z

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	`67f1ca0`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/69d66f40c022230008d95e19
😎 Deploy Preview	https://deploy-preview-21681--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

devadula-nandan · 2026-03-04T13:53:01Z

@carbon-design-system/design this needs a design review as mentioned in the issue.

devadula-nandan · 2026-03-04T13:55:45Z

any missing controls are expected to be added in. #20939

adamalston · 2026-03-30T13:52:26Z

I noticed this pull request is in the merge queue, but it still has a pending visual review label. Is there any remaining work related to that, or should the label be removed?

devadula-nandan · 2026-03-30T14:05:27Z

I noticed this pull request is in the merge queue, but it still has a pending visual review label. Is there any remaining work related to that, or should the label be removed?

right! this needs visual review. as i mentioned before #21681 (comment)

edit: also status ready to merge was an old tag used to trigger the merge queue, through kodiakhq bot. i think we moved away from it 🤔

Kritvi-bhatia17

Great work @devadula-nandan, just some suggestions from content and visual consistency.

Can we arrange the stories alphabetically? For example, “With Type of Custom Validation” could come after “With AI Label”, which would also align with the React Storybook ordering. (Screenshot attached for reference)

Can we use the same label across all Number Input stories in WC—specifically “NumberInput label”? Currently, it varies across 3–4 stories.
Can we update the error message to: “Number is not valid. Must be between -100 and 100.” This should make the error clearer for users and also match the React Storybook.
In WC, for the “With AI Label”, “With Type of Text Controlled”, and “With Type of Custom Validation” stories, a lot of props don’t seem to be working for me. I’ve added a screen recording here for reference:
https://github.com/user-attachments/assets/d679e153-8ac9-4d86-b189-3600467e6d53
Once this is fixed, I’ll be able to continue the review.

adamalston · 2026-04-06T20:24:43Z

edit: also status ready to merge was an old tag used to trigger the merge queue, through kodiakhq bot. i think we moved away from it 🤔

I still see it used frequently. The docs also indicate that it should be used, as of the latest commit in this pull request:

carbon/docs/guides/reviewing-pull-requests.md

Lines 83 to 87 in 73be5f7

    
           - After the second review: 
        
             - Remove all `status` labels. 
        
             - Add the 
        
               https://github.com/carbon-design-system/carbon/labels/status%3A%20ready%20to%20merge%20%F0%9F%8E%89 
        
               label and queue the PR for merging.

devadula-nandan · 2026-04-07T06:13:37Z

edit: also status ready to merge was an old tag used to trigger the merge queue, through kodiakhq bot. i think we moved away from it 🤔

I still see it used frequently. The docs also indicate that it should be used, as of the latest commit in this pull request:

carbon/docs/guides/reviewing-pull-requests.md

Lines 83 to 87 in 73be5f7

- After the second review:

- Remove all `status` labels.

- Add the

https://github.com/carbon-design-system/carbon/labels/status%3A%20ready%20to%20merge%20%F0%9F%8E%89

label and queue the PR for merging.

yes. it was repurposed to be just a status. previously it used to trigger some merge automations.

devadula-nandan · 2026-04-07T07:28:44Z

@Kritvi-bhatia17

Can we arrange the stories alphabetically? For example, “With Type of Custom Validation” could come after “With AI Label”, which would also align with the React Storybook ordering. (Screenshot attached for reference)

^ done

Can we use the same label across all Number Input stories in WC—specifically “NumberInput label”? Currently, it varies across 3–4 stories.

^ updated as per suggestion

Can we update the error message to: “Number is not valid. Must be between -100 and 100.” This should make the error clearer for users and also match the React Storybook.

^ done. this appeared on default story. i updated it as per suggestion.

In WC, for the “With AI Label”, “With Type of Text Controlled”, and “With Type of Custom Validation” stories, a lot of props don’t seem to be working for me. I’ve added a screen recording here for reference:
https://github.com/user-attachments/assets/d679e153-8ac9-4d86-b189-3600467e6d53
Once this is fixed, I’ll be able to continue the review.

as mentioned in pr template

Removed playground story and enabled all controls to default story. any other story controls will be covered in #20939

and in the comment

#21681 (comment)

there is a seperate scope for this to be handled there. the newer stories needs to share same story template that must be working for all stories similar to default story. as part of that issue

Kritvi-bhatia17

LGTM @devadula-nandan, great work! 🚀

…ons, format options (carbon-design-system#21681) * feat: number input type text and custom validations initial commit * fix: ts build errors, and in inheriting fluid number input * chore: comment new tests * fix: add @carbon/utilities as explicit dependency * fix: update lock file * fix: validate on input and controlled set value and tests * chore: update copyright current year * fix: update yarn lock * Update packages/web-components/src/components/number-input/__tests__/number-input-test.js remove test comment Co-authored-by: Mahmoud <132728978+maradwan26@users.noreply.github.com> * fix: few inconsistencies and add tests * chore: add clarity on note * revert: test stories * chore: remove note and update jsdoc * fix: validation logic which are failing tests after merge from main * fix: some edge cases and add tests * revert: test stories, and mark new features as experimental * chore: update utilities to 0.17.0 * fix: modify contradicting test, and fix button disable state in readonly * refactor: add review suggestions, bump test coverage, add story actions * fix: review comments * chore: export re-usable direction type used in event detail * Update number-input.ts Co-authored-by: Adam Alston <aalston9@gmail.com> * docs: update stories --------- Co-authored-by: Mahmoud <132728978+maradwan26@users.noreply.github.com> Co-authored-by: emyarod <emyarod@users.noreply.github.com> Co-authored-by: Adam Alston <aalston9@gmail.com>

feat: number input type text and custom validations initial commit

ad9de82

devadula-nandan changed the title ~~feat: number input type text and custom validations initial commit~~ feat(number-input): type='text' and custom validations parity initial commit Feb 27, 2026

devadula-nandan added 2 commits February 27, 2026 18:02

Merge branch 'main' into feat/number-input-type-text-feature

7194ee3

fix: ts build errors, and in inheriting fluid number input

31d7db5

devadula-nandan added 5 commits March 2, 2026 16:21

Merge branch 'main' into feat/number-input-type-text-feature

06e6391

chore: comment new tests

d046f59

Merge branch 'main' into feat/number-input-type-text-feature

7fe8713

fix: add @carbon/utilities as explicit dependency

7db1972

fix: update lock file

fb9f581

devadula-nandan mentioned this pull request Mar 3, 2026

[Bug]: cds-number-input-skeleton is not rendering #21663

Closed

2 tasks

harishjanardhanan mentioned this pull request Mar 3, 2026

fix(number-input): increase the skeleton size to medium #21691

Closed

6 tasks

devadula-nandan added 3 commits March 4, 2026 18:58

fix: validate on input and controlled set value and tests

118f3df

chore: update copyright current year

824517d

Merge branch 'main' into feat/number-input-type-text-feature

c2b4be3

devadula-nandan marked this pull request as ready for review March 4, 2026 13:44

devadula-nandan requested a review from a team as a code owner March 4, 2026 13:44

devadula-nandan requested review from emyarod and maradwan26 March 4, 2026 13:44

devadula-nandan added the status: visual review 🔍 label Mar 4, 2026

devadula-nandan deployed to @carbon/react storybook preview March 4, 2026 13:56 — with GitHub Actions View deployment

devadula-nandan changed the title ~~feat(number-input): type='text' and custom validations parity initial commit~~ feat(number-input): matches parity on WC type='text', custom validations, format options Mar 4, 2026

devadula-nandan linked an issue Mar 6, 2026 that may be closed by this pull request

[Bug]: cds-number-input-skeleton is not rendering #21663

Closed

2 tasks

devadula-nandan added 2 commits March 11, 2026 15:40

Merge branch 'main' into feat/number-input-type-text-feature

319f4c2

fix: update yarn lock

620d8ac

devadula-nandan deployed to @carbon/react storybook preview March 11, 2026 10:38 — with GitHub Actions View deployment

devadula-nandan added this pull request to the merge queue Mar 30, 2026

adamalston added status: ready to merge 🎉 and removed status: one more review 👀 labels Mar 30, 2026

devadula-nandan removed this pull request from the merge queue due to a manual request Mar 30, 2026

devadula-nandan removed the status: ready to merge 🎉 label Mar 30, 2026

devadula-nandan requested a review from Kritvi-bhatia17 March 30, 2026 15:58

devadula-nandan added 2 commits April 6, 2026 15:36

Merge branch 'main' into feat/number-input-type-text-feature

48da0ae

Merge branch 'main' into feat/number-input-type-text-feature

73be5f7

devadula-nandan deployed to @carbon/react storybook preview April 6, 2026 10:21 — with GitHub Actions View deployment

Kritvi-bhatia17 reviewed Apr 6, 2026

View reviewed changes

devadula-nandan added 2 commits April 7, 2026 12:41

docs: update stories

e54d328

Merge branch 'main' into feat/number-input-type-text-feature

4c521bf

devadula-nandan deployed to @carbon/react storybook preview April 7, 2026 07:27 — with GitHub Actions View deployment

devadula-nandan requested a review from Kritvi-bhatia17 April 7, 2026 09:51

Kritvi-bhatia17 approved these changes Apr 8, 2026

View reviewed changes

Kritvi-bhatia17 added status: ready to merge 🎉 and removed status: visual review 🔍 labels Apr 8, 2026

Merge branch 'main' into feat/number-input-type-text-feature

67f1ca0

devadula-nandan enabled auto-merge April 8, 2026 15:09

devadula-nandan deployed to @carbon/react storybook preview April 8, 2026 15:22 — with GitHub Actions View deployment

devadula-nandan added this pull request to the merge queue Apr 8, 2026

Merged via the queue into carbon-design-system:main with commit 13f2327 Apr 8, 2026
39 checks passed

devadula-nandan deleted the feat/number-input-type-text-feature branch April 8, 2026 16:12

Conversation

devadula-nandan commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

Testing / Reviewing

PR Checklist

Uh oh!

netlify Bot commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for v11-carbon-react ready!

Uh oh!

codecov Bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

netlify Bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for v11-carbon-web-components ready!

Uh oh!

devadula-nandan commented Mar 4, 2026

Uh oh!

devadula-nandan commented Mar 4, 2026

Uh oh!

adamalston commented Mar 30, 2026

Uh oh!

Uh oh!

devadula-nandan commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Kritvi-bhatia17 left a comment

Choose a reason for hiding this comment

Uh oh!

adamalston commented Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

devadula-nandan commented Apr 7, 2026

Uh oh!

devadula-nandan commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Kritvi-bhatia17 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

devadula-nandan commented Feb 27, 2026 •

edited

Loading

netlify Bot commented Feb 27, 2026 •

edited

Loading

codecov Bot commented Mar 2, 2026 •

edited

Loading

netlify Bot commented Mar 2, 2026 •

edited

Loading

devadula-nandan commented Mar 30, 2026 •

edited

Loading

adamalston commented Apr 6, 2026 •

edited

Loading

devadula-nandan commented Apr 7, 2026 •

edited

Loading