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 Option Label, Form Field Partial 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.

[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