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)

---

Screenshots / Varianten

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

Text input

Datepicker

---

Notities

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

[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