Inloggen Account aanvragen

Formuliervelden

Formuliervelden vragen om tekstinvoer of andere input van de gebruiker. Naast verschillende formuliervelden is er ook een voorbeeld voor een inlog met wachtwoord. Foutmeldingen, waarschuwingen, bevestigingen en toelichtingen hebben een herkenbare vorm gekregen. Een datalijst helpt weer met suggesties bij het zoeken in een lijst.

Enkelvoudig invulveld met labels erboven

Bij tekstinvoer krijgt het invulveld een kaderrand in de focuskleur.

Werktekening enkelvoudig formulierveld met label erboven
Formulierveld met labels erboven

Enkelvoudig invulveld met labels ervoor

Werktekening enkelvoudig formulierveld met label ervoor
Werktekening enkelvoudig formulierveld met label ervoor en uitleg invulveld
Voorbeeld formulierveld met label ervoor en uitleg invulveld

Invulveld met meerdere regels

Invulveld voor langere tekstinvoer. Er verschijnt een scrollbalk wanneer de tekst langer is dan in het venster kan worden getoond.

Werktekening invulveld met meerdere regels
Voorbeeld invulveld met meerdere regels

Wachtwoordveld

Voorbeeld invulveld wachtwoord bij login
Foutmelding bij een formulier

Meldingen

Met name bij formulieren is soms feedback nodig om de gebruiker te helpen bij het invullen. Een melding bestaat uit een icoon in een functionele kleur met bijpassende achtergrondtint en een helptekst. Voor de meldingen zijn rijkshuisstijliconen beschikbaar. Deze zijn niet alleen qua kleur functioneel maar ook in vorm onderscheidend. Door toenemend mobiel gebruik is het aan te bevelen de melding niet op een verzamelplek maar bij het desbetreffende invulveld te laten zien om onnodig heen en weer scrollen te voorkomen.

vormgeving meldingen: foutmelding, waarschuwing, bevestiging, toelichting

Voorbeelden van een foutmelding, een waarschuwing, een bevestiging en een toelichting. Zie voor iconen, 24 px iconen online communicatie:

  • Foutmelding (icoon 3914): achtergrond rood tint2 #f9dfdd
  • Waarschuwing (icoon 3915): achtergrond donkergeel tint2 #fff4dc
  • Bevestiging (icoon 3916) : achtergrond groen tint2 #e1eddb
  • Toelichting (icoon 3948): achtergrond hemelblauw tint2 #d9ebf7

Datalijst

Een datalijst kan bij een zoekveld met geautomatiseerde suggesties worden toegepast. Door een letter in te tikken verschijnen er opties in een dropdownmenu die aangeklikt kunnen worden. Het geselecteerde onderdeel krijgt een kaderrand met focuskleur en kan worden bekeken door op de button 'bekijk' te klikken.

Voorbeeld van een datalijst