Form Field Label

[jeffreylauwers]

We willen graag meer leren over het Form Field Label 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

Form Field Label

Doel

Toont een tekstlabel dat informeert over de in te vullen informatie.

Gerelateerde componenten

Form Field, Form Field Description, Form Field Option Label, Legend

Richtlijnen

Labels in een formulier - NL Design System
Onze richtlijnen rondom labels in formulieren.

Voorkom fouten, help de gebruiker - NL Design System
Onze richtlijnen rondom het markeren van verplicht of niet-verplichte velden in formulieren.

Onderzoek

Always use a label - Adam Silver
Adam Silver legt uit waarom labels altijd toegepast moeten worden en zichtbaar moeten zijn.

The problem with float labels and what to do instead - Adam Silver
Adam Silver legt uit waarom floating labels voor problemen zorgen.

Stop using Material Design text fields! - Matsuko Friedland
Matsuko Friedland legt uit waarom de Material manier van labels voor problemen zorgt.

4 common mistakes UI/UX designers make when trying to help users spot required form fields (and what user research shows is better) - Adam Silver
Adam Silver legt uit hoe je verplichte optionele velden het beste kunt markeren.

Label Placement in Forms - UX matters
Onderzoek over de positie van labels.

Website Forms Usability: Top 10 Recommendations - Nielsen Norman Group
Checklist voor ontwerp van formulieren waarbij enkele punten betrekking hebben tot Form Field Labels.

[jeffreylauwers]

Amsterdam

• Storybook
• Figma (in combinatie met Text input)
• Github

---

Screenshots / Varianten

Storybook

Figma
Niet beschikbaar als 'los' component maar wel toegepast in combinatie met verschillende form controls. Onder andere...

Text input

Select

Date picker

---

Notities

• Onder de naam: Label (Storybook).
• Het label heeft een bold font-weight.
• Het markeren van niet verplichte velden lijkt (Figma) te gebeuren door de tekst 'Optioneel'.
  • De tekst staat uiterst rechts van het form field label.
  • De tekst wijkt visueel af van het form field label door de grijze kleur, kleinere font-size en regular font-weight.
• Fieldset 'Legend' heeft dezelfde stijl als een Form field label.

[VincentSmedinga]

Wij hebben intussen een variant isPageHeader toegevoegd aan ons Label component. Als een Field de enige inhoud van de pagina is, fungeert de tekst van het label ook als titel van de pagina (en daarmee ook als bron voor de url). De variant wrapt het <label> in een <h1> en neemt (binnenkort, dat deden we nog niet in de eerste implementatie) de typografie daarvan over.

Daarnaast zijn we bezig een variant ‘inFieldSet’ toe te oegen. Deze is voor het geval waarin het bijbehorende Field onderdeel is van een bovenliggende FieldSet. De Legend van een Field Set heeft dezelfde vormgeving als Label omdat ze naast elkaar kunnen voorkomen (bijv. een Field met een Text Input en daaronder een Field Set met Checkboxes). Maar als een Field in een Field Set staat maken we die hiërarchie zichtbaar door het Label ervan de ‘regular’ tekstdikte te geven in plaats van ‘bold’.

Analoog heeft Field Set ook een variant legendIsPageHeader (Legend is hier een prop, geen los component) en ook inFieldSet.

[VincentSmedinga]

Verder is de bovenstaande schermafbeelding met het label ‘Optioneel’ niet meer actueel. We schrijven nu ‘(niet verplicht)’ achter het label, in zwart en reguliere tekstdikte.

Ook de ‘dd-mm-jjjj’ hint onder de Date picker heeft het niet gehaald.

[jeffreylauwers]

Den Haag

• Storybook
• Figma - Huidig (in combinatie met Text input)
• Figma - WIP
• Github

---

Screenshots / Varianten

Storybook

In combinatie met Text input

Figma - Huidig
Niet beschikbaar als 'los' component maar wel toegepast in combinatie met verschillende form controls. Onder andere...

Text input

Date picker

Text area

Figma - WIP

Figma - Formulieren

---

Notities

• Onder de naam: Form label (Storybook) en Form field label (Figma - WIP)
• Het label heeft een bold font-weight.
• Het markeren van niet verplichte velden gebeurd door de tekst '(Niet verplicht)'.
  • De tekst staat direct rechts van het form field label.
  • De tekst wijkt visueel af van het form field label door de grijze kleur en regular font-weight.
• Fieldset 'Legend' heeft dezelfde stijl als een Form field label.

[jeffreylauwers]

DSO Toolkit

• Storybook (in combinatie met Text input)
• Github

---

Screenshots / Varianten

Storybook
Niet beschikbaar als 'los' component maar wel toegepast in combinatie met verschillende form controls. Onder andere...

Text input

Required markering

Select

Date picker

---

Notities

• Het label heeft een bold font-weight.
• Het markeren van verplichte velden gebeurd doormiddel van asterik (*).
  • De asterik staat direct rechts van het form field label.
  • De asterik wijkt visueel af van het form field label door de grijze kleur.
• Optie beschikbaar om te combineren met ToggleTip.
• Fieldset 'Legend' heeft dezelfde stijl als een Form field label.

[jeffreylauwers]

DUO

Documentatie website

---

Screenshots / Varianten

Documentatie website

Default

Horizontale uitlijning
Gebruik alleen voor medewerkersschermen.

---

Notities

• Het label heeft een regular font-weight.
• Het markeren van niet verplichte velden gebeurd door de tekst 'Optioneel'.
  • De tekst staat direct rechts van het form field label.
  • De tekst wijkt visueel af van het form field label door de grijze kleur, kleinere font-size en text-transform all-caps.
• Fieldset 'Legend' heeft dezelfde stijl als een Form field label.

[jeffreylauwers]

Open Formulieren

Storybook (in combinatie met Text input)

---

Screenshots / Varianten

Storybook
Niet beschikbaar als 'los' component maar wel toegepast in combinatie met verschillende form controls. Onder andere...

Text input

Select

Date picker

Text input - Invalid state

No asterisks
The backend can be configured to treat fields as required by default and instead mark optional fields explicitly, through the ConfigContext.

---

Notities

• Het label heeft een regular font-weight.
• Het markeren van verplichte velden gebeurd doormiddel van asterik (*).
  • De asterik staat direct rechts van het form field label.
  • De asterik wijkt visueel af van het form field label door de rode kleur.
• Mogelijkheid beschikbaar om alle form fields 'by default' verplicht te maken, in dat geval wordt de tekst '(niet verplicht)' onderdeel van het form field label.

[jeffreylauwers]

Open Gemeenten

Patternlab - Forms and Search

---

Screenshots / Varianten

Patternlab
Niet beschikbaar als 'los' component maar wel toegepast in combinatie met verschillende form controls. Onder andere...

Text input

Datepicker

Select

Text area

---

Notities

• Het label heeft een regular font-weight.
• Het markeren van niet verplichte velden gebeurd door de tekst '(Niet verplicht)'.
  • De tekst staat direct rechts van het form field label.
  • De tekst wijkt visueel af van het form field label door de bold font-weight.
• Fieldset 'Legend' heeft dezelfde stijl als een Form field label.

[jeffreylauwers]

Rotterdam

• Figma
• Storybook

---

Screenshots / Varianten

Storybook

Figma

---

Notities

• Het label heeft een bold font-weight.
• Standaard zijn alle velden verplicht.
• Het markeren van niet verplichte velden gebeurd door de tekst '(Niet verplicht)'.
  • De tekst staat direct rechts van het form field label.
  • De tekst wijkt visueel af van het form field label door een regular font-weight en kleinere font-size.
• Fieldset 'Legend' heeft dezelfde stijl als een Form field label.

[jeffreylauwers]

RVO

• Documentatie website
• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Default

Optional

Required

---

Notities

• Het label heeft een bold font-weight.
• In de documentatie staat het volgende...
  • Geef aan of formulierveld verplicht ingevuld moet worden.
  • Wanneer het merendeel van de velden verplicht is hoeft dit niet expliciet aangegeven te worden. Er kan dan voor gekozen worden om optionele te kenmerken als zodanig.
• Het markeren van niet verplichte velden gebeurd door de tekst '(optioneel)'. --> Dit wordt aangepast naar '(niet verplicht)'.
  • De tekst staat direct rechts van het form field label.
  • De tekst wijkt visueel af van het form field label door een regular font-weight en kleinere font-size.
• Het markeren van verplichte velden gebeurd doormiddel van asterik (*).
  • De asterik staat direct rechts van het form field label.
  • De asterik wijkt visueel af van het form field label door de rode kleur.
• Fieldset 'Legend' heeft dezelfde stijl als een Form field label.

[jeffreylauwers]

Utrecht

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Label

Op basis van Open Formulieren

Figma

---

Notities

• Het label heeft een bold font-weight.
• Het markeren van niet verplichte velden gebeurd door de tekst '(niet verplicht)'.
  • De tekst staat direct rechts van het form field label.
  • De tekst is onderdeel van het form field label.
• Het markeren van verplichte velden gebeurd doormiddel van asterik (*).
  • De asterik staat direct rechts van het form field label.
  • De asterik wijkt visueel af van het form field label door de rode kleur.
    Fieldset 'Legend' heeft dezelfde stijl als een Form field label.

[alimpens]

Is er voor 'Form field label' gekozen vs 'Label' om de naam meer gelijk te laten lopen met Form field description en Form field error message e.d.? De naam staat daarmee wat verder af van de HTML terminologie.

[Robbert]

Alleen de naam "label" vonden we ambigu en onduidelijk, omdat die ook regelmatig gebruikt voor "Badge" component: https://component.gallery/components/badge/

We kunnen ook nog overwegen om de component 'Form label' te noemen, als dat de voorspelbaarheid niet in de weg zit als je 'm naast andere componenten gebruikt zoals de "Form field description", de "Form field error message" en de "Form field status".

[jeffreylauwers]

Hey Aram, klopt 'Form field label' gaat mooi samen met 'Form field description' en 'Form field error message'. De naam staat hierdoor inderdaad verder af van de HTML terminologie, waar we ons bij naamgeving zeker zoveel mogelijk aan willen houden. Echter omdat 'label' wordt ook ingezet bij input type radio en checkbox leek ons dit een goeie keuze.

Tijdens een Design Open Hour zijn we met verschillende communityleden door deze naamgeving gegaan onder het mom van 'Labels and Legends' (afgeleid van Dungeons and Dragons omdat het een groot avontuur was ;) ). Je kan dit terugvinden in het Figma Schetsboek.

[alimpens]

We kunnen ook nog overwegen om de component 'Form label' te noemen, als dat de voorspelbaarheid niet in de weg zit als je 'm naast andere componenten gebruikt zoals de "Form field description"

Ja, dat is dan misschien een beetje inconsistent. Het is ook niet het label van het hele formulier, maar van 1 veld.

Echter omdat 'label' wordt ook ingezet bij input type radio en checkbox leek ons dit een goeie keuze.

Bij Amsterdam noemen we het hele ding, input + label, een Radio of een Checkbox, zodat Label vrij is voor wat jullie Form Field Label noemen. Is wat korter en dichter bij HTML, dat is prettig. Maar ik kan prima leven met Form Field Label ;)

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Form field label op het Community bord

[eslook]

✨ Dit component is nu Community ✨

Help je mee hem door de Candidate stappen te krijgen?
Form Field Label op het Candidate bord

[RenateRoke]

Candidate selectieproces: Is de component al ingesteld voor meerdere huisstijlen?

Het kernteam heeft gekeken of Form Label van Gemeente Utrecht al geschikt is om richting Hall of Fame te gaan. Hiervoor willen we dat de component succesvol in tenminste 2 verschillende huisstijlen is ingezet.

We hebben gekeken naar de huisstijl van Utrecht, Den Haag en Rotterdam en we zijn tot de volgende conclusie gekomen:

🎉 Jazeker! Met jullie hulp hebben we genoeg informatie verzameld om een goed instelbaar component als Candidate beschikbaar te gaan maken.

[RenateRoke]

Candidate selectieproces: Is de component al ingezet in meerdere projecten?

Omdat de Form Label van Utrecht geschikt is voor verschillende huisstijlen heeft het kernteam ook gekeken of hij al gebruikt wordt in productie, prototypes en templates.
Deze informatie is nodig om de component een stap verder te brengen in het Candidate proces.

We hebben hiervoor is gekeken wie de component succesvol heeft ingezet en we zijn tot de volgende conclusie gekomen:

🎉 De component wordt onder andere gebruikt door:

• Gemeente Utrecht gebruikt het in https://formulieren.odru.nl/calamiteit/stap/persoonlijke-gegevens-ongewoon-voorval en https://loket.digitaal.utrecht.nl/nl/form/klacht-over-de-gemeente-doorgeven/stap/uw-klacht
• Gemeente Den Haag gebruikt het in https://formulieren.denhaag.nl/geboorteakte-aanvragen/stap/uw-rol
• Rijkshuisstijl Community gebruikt het in https://www.rijkshuisstijl-community.nl/form/
• Developer Overheid gebruikt het in http://developer.overheid.nl/
• Open Formulieren gebruikt het onder andere in https://open-formulieren.venray.nl/dossiers-vth/stap/gegevens-dossiers-opvragen
• Gemeente Purmerend gebruikt het in https://signalen-frontend-wcag.vercel.app/nl/incident

[RenateRoke]

Candidate selectieproces: Is de component al meegenomen in een WCAG-EM audit?

Om de Form Label van Gemeente Utrecht als een toegankelijk Candidate component beschikbaar te maken is het handig als we weten of de Community implementaties al helemaal toegankelijk kunnen worden ingezet.

We hebben hiervoor gekeken of er een toegankelijkheidsverklaring beschikbaar was voor de projecten die in productie worden gebruikt. En:

🎉 Ja! We hebben de uitkomsten van de volgende WCAG-EM audit (1 of meerdere) kunnen vinden:

• Developer Overheid gebruikt het in https://toegankelijkheidsrapport.frameless.io/rapport/developer.overheid.nl-2025-06-26
• Digitaal Loket Utrecht gebruikt het in https://toegankelijkheidsrapport.frameless.io/rapport/loket.digitaal.utrecht.nl-2024-06
• Gemeente Purmerend gebruikt het in https://toegankelijkheidsrapport.frameless.io/rapport/purmerend-signalen-2024-12
• Open Formulieren gebruikt het in https://www.horstaandemaas.nl/file/deelonderzoek-techniek-dimpact-formulieren-systeem-wcag-21-aa-pdf
• Horst aan de Maas (met Open Formulieren) gebruikt het in https://www.horstaandemaas.nl/sites/horst-ad-maas/files/2023-03/WCAG%202.1%20AA%20inspectie%20-%20open-formulieren.horstaandemaas.nl%20-%201.1.pdf

Notities voor toegankelijkheid

📝 De problemen die we hebben gevonden hebben te maken met het toegankelijk inzetten van de component, zoals het niet of aan verkeerde invoervelden koppelen van labels, en alleen een asterisk gebruiken voor verplichte velden zonder ergens te benoemen wat een asterisk betekent. We gaan uiteraard goede documentatie schrijven om te helpen voorkomen dat deze toegankelijkheidsfouten ontstaan.

[sergei-maertens]

In de nieuwe Open Formulieren renderer maken we gebruik van de Utrecht Label community component, maar daar hebben we wat nuances aan moeten brengen:

• Splitsing tussen Label en LabelContent, om tooltips te supporten. Deze block-level elementen mogen namelijk niet in een inline label tag voorkomen, en we willen deze ook buiten de semantische betekenis van label houden, anders krijgen screenreaders het lastig.
• Voor de label content hebben we optie om het als span te renderen ipv label tag - met name in radio groups, maar ook andere fieldsets gebruiken we de label styling/appearance als legend. Echter is een label tag hier fout omdat die niet aan 1 enkele input te relateren is.
• We hebben extensies/varianten om een suffix voor verplicht/niet verplicht toe te voegen. Dit is in de backend een feature flag die elke gemeente zelf kan instellen. Hierbij is localization (en/nl/...?) relevant, en er zijn dus custom styles om de asterisk als pseudo-element te renderen.

[RenateRoke]

Hele fijne informatie, dankjewel! Ik weet dat er eerder wat gesprekken waren om van de verplicht/niet verplicht suffix eventueel losstaand component te maken, hoe staan jullie daar in?

[sergei-maertens]

Het hangt er van af - belangrijk voor ons is dat we natuurlijke volgorde hebben van teksten en elementen in meerdere talen, ook talen die we in de toekomst ondersteunen. Dat vereist dat de elementen (suffix, asterisk) onderdeel worden van de vertaalstring en bij elkaar blijven, want volgorde van woorden in teksten kan wezenlijk anders zijn per taal - je kan niet naïef elementen hardcoded achter elkaar renderen.

Zolang dat mogelijk is, heb ik hier verder geen sterke mening over. Ik weet ook niet of de huidige situatie met pseudo element wel voldoende screenreader friendly is.