Number Input

[jeffreylauwers]

We willen graag meer leren over de Number Input component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook of screenshots. Met deze informatie kunnen we bewijzen dat het component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Number Input

Doel

Invoerveld voor een heel getal of een getal met decimalen.

Ook bekend als

Numeric Input

Gerelateerde componenten

Checkbox Group, Date Input, File Input, Password Input, Radio Group, Range, Text Area, Text Input, Text Input Group

Onderzoek

Why the GOV.UK Design System team changed the input type for numbers - GOV.UK
Hanna Laakso legt uit waarom GOV.UK aanpassingen heeft gedaan aan de Number Input.

Most web developers are using inaccessible number inputs on forms and here is how to fix it - Coywolf
In dit artikel wordt besproken hoe veel webontwikkelaars onjuiste nummerinvoervelden gebruiken, en wordt aanbevolen om type=‘text’ met extra attributen te gebruiken om de toegankelijkheid voor iedereen te verbeteren.

When to use the number input - Medium (Adam Silver)
In dit artikel wordt uitgelegd wanneer het gebruik van de ‘number’-invoer ongeschikt is, ondanks dat het veld vaak wordt gekozen voor gegevens zoals kaartnummers en vervaldatums, en wordt geadviseerd om ‘text’-invoer te gebruiken voor cijfers zonder rekenkundige waarde.

Notities

Number Input schets - NKDS Figma Schetsboek
Eerdere vragen en opmerkingen rondom dit component. Inclusief enkele schetsen.

[sergei-maertens]

Open Formulieren

In Open Formulieren hebben we een aantal varianten:

• Storybook - Form.io component
• Storybook - Pure react

---

Screenshots / Varianten

Storybook - Form.io

Default

With suffix

Storybook - Pure react

Small number inputs

Free form number fields

---

Notities

• Merk op dat het decimale scheidingsteken meeverandert met de actieve locale (dus , in NL en . in EN). Hetzelfde gebeurt bij het groeperen van de duizendtallen.
• Uitgebreide documentatie beschikbaar.

[jeffreylauwers]

Amsterdam

Notities

Geen apart component gevonden. Number input lijkt Text input stijl te volgen.

[jeffreylauwers]

Den Haag

Storybook (op basis van Open Forms)

---

Screenshots / Varianten

Storybook

Default

With prefix

With suffix

---

Notities

• Number input lijkt Text input stijl te volgen.

[jeffreylauwers]

DSO Toolkit

• Storybook

---

Screenshots / Varianten

Storybook

---

Notities

• Geen mogelijkheid om vrij in te vullen.
• Eerder 'Stepper' component.

[jeffreylauwers]

DUO

Notities

Number input functionaliteit lijkt onderdeel te zijn van het Text input component.

Wanneer gebruiken
Gebruik een text input in een formulier als gebruikers een antwoord moet invoeren dat op een enkele regel moet passen. Bijvoorbeeld: een e-mailadres, een getal, een telefoonnummer.

[jeffreylauwers]

Open Gemeenten

• Patternlab - Forms and Search

---

Screenshots / Varianten

Patternlab

Default

---

Notities

• Number input lijkt Text input stijl te volgen.

[jeffreylauwers]

Rotterdam

Notities

Geen apart component gevonden. Number input lijkt Text input stijl te volgen.

[jeffreylauwers]

RVO

Notities

Geen apart component gevonden. Number input lijkt Text input stijl te volgen.

[rianrietveld]

Graag wil ik hier mijn reserve uitpreken voor het gebruik van type="number".
De NLDS richtlijn bij formulieren > Zorg dat iedereen een formulierelement kan bedienen of geef een alternatief > Input type=“number” versus inputmode=“numeric” geeft een voorkeur voor inputmode="numeric" aan.
GOV.UK heeft hier onderzoek naar gedaan en vindt type=number qua gebruikersvriendelijkheid te foutgevoelig.

En over een bedrag met decimalen:
Het gebruik van een komma/punt kan afhankelijk zijn van de taal van de browser en kan tot grote fouten leiden. Zo kun je per ongeluk ineens hele andere bedragen invullen (of onbegrijpelijke foutmeldingen krijgen) als je browser van een komma en punt maakt. Of als een Amerikaan een bedrag invult zoals deze gewend.

Ik ben het ermee eens dat dit een component moet worden, maar dan ook graag bovenstaande als overweging meenemen.

[Rozerinay]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Number Input op het Community bord