Gedaan met laden. U bevindt zich op: Prijs Formulieren

Prijs

De documentatie van het Design System is nog in bèta en wordt stapsgewijs aangevuld.

Wanneer u een prijs vraagt in te vullen in een formulier, gebeurt dit best op een gebruiksvriendelijke en uniforme manier overheen verschillende formulieren, pagina’s, websites en/of toepassingen. Idealiter volgt u de instructies hieronder, om zo ook bij te dragen aan één overheidservaring.

Instructies voor het invullen van prijsvelden

Gebruik een input pattern (of input mask) dat ervoor zorgt dat alleen getallen en een komma kunnen worden ingevoerd. Dit voorkomt dat gebruikers per ongeluk letters of andere speciale tekens typen die niet relevant zijn voor een prijs.

Het inputpatroon zorgt ervoor dat spaties automatisch worden ingevoegd, en dat de komma als decimaalteken fungeert. Hierdoor kan de gebruiker zich concentreren op het invoeren van alleen de cijfers en de komma. De variant prijs (price) pattern van de component Input pattern, is een gedefinieerd patroon en laat enkel cijferinput + komma toe.

Dit verbetert de leesbaarheid van grotere bedragen. Bijvoorbeeld: bij een invoer van 12345,67 wordt dit weergegeven als 12 345,67.

Munteenheid als prefix of suffix

Plaats de munteenheid (zoals €) als een vaste prefix vóór het inputveld of als een suffix na de ingevoerde waarde. Dit maakt het meteen duidelijk in welke valuta de prijs moet worden ingevuld en voorkomt misverstanden.

Door de munteenheid standaard op te nemen, hoeft de gebruiker deze niet zelf in te voeren.

Voorbeeld van prijs annotation

  • Duidelijke instructies over decimalen:

    • Voeg een korte uitleg toe boven het veld (annotation) waarin je aangeeft hoe precies de prijs moet worden ingevuld. Bijvoorbeeld: “Voer de prijs in tot op de cent, bijvoorbeeld € 123,45”.
    • Als decimalen niet nodig zijn, kun je dit ook vermelden, zoals “Geef de prijs in afgeronde euro’s”.
  • Eenvoudige voorbeelden:

    • In de toelichting boven het invoerveld (annotation) kan een voorbeeld gegeven worden om de verwachte invoer duidelijk te maken, zoals: “Voorbeeld: € 1 234,56”.
Don't
  • Waarde als placeholder
  • Munteenheid wordt niet meegegeven
Do
  • Toelichting rond welke input verwacht wordt
  • Prefix met munteenheid
  • Gebruik input pattern/mask