mi6 / mi6/ic-ui-kit

Numeric Input

Open
#1,148 0 comments 0 reactions 0 assignees View on GitHub
component: ic-text-field
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.