Component: Number input

[jeffreylauwers]

Purpose

Invoerveld waar een numerieke waarde kan worden ingevuld.

Notes

We verwachten hierbij het voorbeeld van GOV.UK te volgen.
https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/

Technische dingen om rekening mee te houden

gebruik niet <input type="number"> zodat je geen spinner krijgt die niet gebruiksvriendelijk is.

gebruik in plaats daarvan <input type="text" input-mode="numeric"> zodat je het juiste toetsenbord krijgt op touch devices etc.

note het gebruik van <input type="text" input-mode="decimal"> heeft in het verleden problemen opgeleverd en hebben wij niet recent getest. Laat ons weten als het probleem dat gov.uk beschrijft niet meer voorkomt!

voor met decimalen zoals geldbedragen weten we niet wat je moet doen. In JavaScript en in HTML validatie is de decimal-separator een . in nederland een ,. Bij twijfel gebruik <input type="text"> met een goed validatiepatroon zodat mensen zowel een punt als een komma kunnen gebruiken.

[Yolijn]

Note to self: this is our interpretation of <input type=number>.... We might also want to add that component with a discouraged status and a link to the numeric-input. Or we might want to ensure we have a redirect for the url with nldesignsystem.nl/number-input and showing results when searching for it