Numeric Input
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
## Summary
It would be great if there were a numeric input component, or better guidance/options to the existing `IcTextField`
## 💬 Description
IcTextField accepts the `type="number"` prop which is a standard HTML attribute, but there are a few problems with this. Firstly, this does not include the up and down arrows that would usually be included in a number input using a standard HTML input (this is just a good signifier that it is numeric). Secondly, HTML number inputs (it seems from a bit of research) are quite notoriously a bit broken! They change into scientific notation once it becomes a large number and also are just generally a bit messy between browsers etc. There is a really interesting blog by GOV.UK design system about why they stopped using `type="number"` [here](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/). They moved over to `inputmode="numeric"` and `pattern=[0-9]*`. The pattern prop doesn't seem to exist on `IcTextField`. MUI have [recently merged](https://github.com/mui/material-ui/issues/19154) a standalone numeric input to their base UI)
The way I see it there are a few options worth looking into
1. Exposing the `pattern` attribute as a prop (there are some things that this can't handle very well like decimal points), and providing some guidance on the best way to do this (this would be a great short term fix)
2. Creating a new numeric input component that can handle many different kinds of input like integers and doubles etc
## 💰 Use value
There are some accessibility issues with using `type=number`. There is not a good alternative using the current components. Creating a new component would solve the issue and provide an easy solution and make apps quicker to build!
## 📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.
*Given*
*When*
*Then*
## ✏ Designs
If there's a Figma design file (or other mock-up), include it here.
## 🧾 Guidance
If there's written guidance or documentation, include a link to it here.
## Additional info
Tell us anything else useful to help us understand your suggestion.
Contributor guide
Research direction
Start by reviewing the existing IcTextField component and the GOV.UK and MUI references linked in the issue. Clarify whether the work should expose pattern guidance or create a standalone numeric input, then define the supported integer, decimal, accessibility, and browser behaviors before implementation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100