Form Field Description

[jeffreylauwers]

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

Doel

Toont ondersteunende tekst en biedt extra context over de in te vullen informatie.

Richtlijnen

Descriptions in een formulier - NL Design System
Onze richtlijnen rondom descriptions in formulieren.

Placeholders in een formulier - NL Design System
Onze richtlijnen rondom placeholders in formulieren.

Onderzoek

Avoid Messages Under Fields - Adrian Roselli
Artikel beschrijft waarom Form Field Descriptions beter tussen het label en form control geplaatst kunnen worden.

The problem with placeholders and what to do instead - Adam Silver
Artikel beschrijft waarom placeholders voor problemen zorgen.

[jeffreylauwers]

Amsterdam

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

---

Screenshots / Varianten

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

Text input

Datepicker

Storybook
Niet beschikbaar als 'los' component maar wel gevonden bij story van Field (With description)

---

Notities

In Figma

• Wordt 'Hint' genoemd.
• Optie om boven en onder form control (Text input) te tonen.
• Boven foutmelding.

Storybook

• Onder Field (With description).
• Is in code een paragraaf die via aria-describedby gekoppeld wordt aan het invulveld.

[jeffreylauwers]

Den Haag

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

---

Screenshots / Varianten

Storybook

Default

Invalid

Valid

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

Radio group

Text area

Figma - WIP

---

Notities

• In Storybook ook een Invalid en Valid state. Maar ook een Form field error message.
• In Storybook wordt de description boven een form control geplaatst.
• In Storybook wordt de description boven de error message geplaatst, en zit het form control er tussen.
• In Figma - Huidig wordt de description onder een form control geplaatst.
• In Figma - Huidig wordt de description gecombineerd met error message.
• In Figma - WIP wordt de description boven een form control geplaatst.
• In Figma - WIP wordt de description boven de error message geplaatst.

[jeffreylauwers]

DSO Toolkit

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

Invalid state Text input

---

Notities

• Wordt 'Helptext' genoemd.
• Description wordt onder een form control geplaatst.
• Description wordt onder de error message geplaatst.

[jeffreylauwers]

DUO

Documentatie website (in combinatie met Text input)

---

Screenshots / Varianten

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

Text input

Radio group

Text area

Text input - Invalid state

---

Notities

• Wordt 'Hinttekst' genoemd.
• Description wordt direct onder het label geplaatst, niet altijd boven een form control vanwege de optie om horizontaal uit te lijnen.
• Description wordt boven de error message geplaatst.

[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

Radio group

Text input - Invalid state

---

Notities

• Description wordt onder een form control geplaatst inclusief achtergrond kleur met border-left.
• Description wordt boven de error message geplaatst.

[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

Radio group

---

Notities

• Description wordt onder een form control geplaatst.
• Description wordt [Martijn zoekt dit uit] error message geplaatst.

[jeffreylauwers]

RVO

• Documentatie website
• Storybook
• Figma

---

Screenshots / Varianten

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

Text input

Datepicker

Select

Radio group

Text input - Invalid state

---

Notities

• Wordt 'Helper text' genoemd.
• Description wordt boven een form control geplaatst.
• Description wordt boven error message geplaatst.

[jeffreylauwers]

Utrecht

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Default

Invalid

Valid

In combinatie met Text input

Figma

---

Notities

• Uitgebreide documentatie beschikbaar.
• Description wordt boven een form control geplaatst.
• Description wordt boven error message geplaatst.

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

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

[eslook]

✨ Dit component is nu Community ✨

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

[RenateRoke]

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

Het kernteam heeft gekeken of Form Field Description 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:

• Gemeente Den Haag
• Gemeente Duiven
• Gemeente Haarlem
• Gemeente Hoeksche Waard
• Gemeente Hoorn
• Gemeente Nijmegen
• Provincie Zuid-Holland
• Gemeente Tilburg
• Gemeente Westervoort
• Gemeente Zevenaar
• NLDS voorbeeldthema

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 Field Description van Gemeente 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 gekeken wie de component succesvol heeft ingezet en we zijn tot de volgende conclusie gekomen:

🎉 De component wordt onder andere gebruikt door:

• Onder andere de Gemeente Den Haag gebruikt het in combinatie met Open Formulieren op https://formulieren.denhaag.nl/geboorteakte-aanvragen/stap/uw-gegevens
• Rijkshuisstijl Community gebruikt het in https://www.rijkshuisstijl-community.nl/form/
• Gemeente Purmerend gebruikt het in https://signalen-frontend-wcag.vercel.app/nl/incident

Dat maakt dat we door kunnen met de volgende stap in het selectieproces. Heb je toevoegingen aan deze lijst? We horen het graag!

[RenateRoke]

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

Om de Form Field Description 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:

• Gemeente 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
• Gemeente Horst aan de Maas gebruikt het met Open Formulieren 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 beschrijvende teksten geven bij invoervelden. We gaan uiteraard goede documentatie schrijven om te helpen voorkomen dat deze toegankelijkheidsfout ontstaat.