Add NumberField component#575
Merged
mkernohanbc merged 55 commits intomainfrom Jan 14, 2026
Merged
Conversation
Contributor
Author
|
Tagging @Philip-Cheung for design review and @Supriya-Arora for code review! Will merge once you both approve. |
Check to see if the disabled text in the number value and units are using the disabled type token |
Contributor
Author
Fixed in bab4634 |
Philip-Cheung
approved these changes
Dec 9, 2025
Contributor
Author
|
Temporarily removing all unit tests — this branch doesn't have the Vitest config, will refactor tests for this component as part of #599. |
ty2k
requested changes
Jan 12, 2026
Contributor
ty2k
left a comment
ty2k
left a comment
There was a problem hiding this comment.
Awesome component! 🚀 Couple suggestions below.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR implements a new
NumberFieldcomponent, using RAC NumberField as its base.Examples are included in the Vite kitchen sink app, along with examples and tech docs in Storybook:
A
NumberFieldis composed from RAC's Group and Input components and the existing BCDS Button component. A numerical value can be entered via increment/decrement buttons, keyboard or using the scroll-wheel.The
formatOptionsprop enables developers to define specific unit types and formatting (eg. currency or distance). Additionally, it also includes aunitLabelprop that renders an additional text label next to the input, intended for use with custom units not supported inIntl.NumberFormat().It supports the same form validation/submission and error-handling methods (via the
isInvalidanderrorMessageprops) as our other input components. Developers can setminValueand/ormaxValueto constrain the range of acceptable values. Thestepprop can also be used to set the increment 'tick'.