Form Field

[jeffreylauwers]

We willen graag meer leren over de Form Field component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de 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

Doel

Een invoerveld en bijbehorende onderdelen die helpen bij het invullen.

Gerelateerde componenten

Checkbox Group, Date Input, File Input, Number Input, Password Input, Radio Group, Range, Text Area, Text Input, Text Input Group

Onderzoek

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

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 en optionele velden het beste kunt markeren.

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

Avoid Messages Under Fields - Adrian Roselli
Artikel dat 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 dat beschrijft waarom placeholders voor problemen zorgen.

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

How to make inline error messages accessible - Hidde de Vries
Artikel waarin Hidde beschrijft hoe je inline error messages toegankelijk kunt aanbieden.

[Rozerinay]

Amsterdam

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

With description
A Field can have a description.

With error
A Field can indicate if the contained input has a validation error. Use Error Message to describe the error.

Figma

Optional fields

With description

With character count

Invalid

---

Notities

• Onder de naam: Field.
• Er is een maximale breedte ingesteld voor de Field.
• Form field label, Form field description en Form field error message zijn erin meegenomen.
• In Figma is ook een Character count te zien onder de Text input of Select.
• Richtlijnen beschikbaar.

[VincentSmedinga]

We hebben ervoor gekozen om Field genoeg te laten zijn als naam, dus zonder Form ervoor. We verwachten het concept ‘Field’ niet buiten formulieren nodig te hebben of accepteren dat we in dat geval een andere naam moeten vinden.

Als je hier wel Form ervoor zet moet je ook Form Field Set aanhouden (in plaats van Field Set, terwijl het HTML-element gewoon fieldset is) en Form Field Description, Form Field Error Message, Form Field Character Counter etc. en dan wordt het wel wat lang allemaal.

Zie ook mijn reactie bij Fieldset.

[Rozerinay]

Den Haag

• Storybook
• Figma - WIP
• Github

---

Screenshots / Varianten

Storybook

Default

With description

Invalid

Single checkbox

Checkbox group

Checkbox group with description

Radio button group

Radio button group with description

Select input

Figma

Text input

Textarea

Checkbox group

Radio group

Description
Form field kan aanvullende informatie bevatten dankzij Form field description.

Form field als Heading
Standaard bevat Form field een Form field label. Via het component panel is deze in te wisselen voor een Heading.

State default

State invalid

---

Notities

• Verschillende inputs zijn hierin meegenomen, zoals Checkbox Group, Radio Group en Select input.
• Form field label, Form field description en Form field error message zijn hier ook meegenomen.
• Form field error message is in Storybook onder de input en in Figma boven de input.
• In Storybook is ook een single checkbox te zien. Deze bevat geen Form field label.

[Rozerinay]

DSO

• Documentatie website
• Storybook
• Github

---

Screenshots / Varianten

Storybook

Default

Required

Disabled

Read-only

Info active

Info fixed false

Invalid

Feedback icon

---

Notities

• Onder de naam: Input.
• Verschillende types zijn hierin meegenomen, zoals text, email, date, password, url en tel.
• Form field label is erin meegenomen.
• Mogelijkheid voor een icon right in de Input.
• Mogelijkheid voor een toggletip. Bij on click verschijnt er een info tekst onder het Form field label.
• Formaat (size) van Input is instelbaar.

[Rozerinay]

RVO

Github

---

Notities

Heeft alleen een Form field component in GitHub.

[Rozerinay]

Utrecht

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Default

Invalid

Figma

Form field kan verschillende form inputs bevatten. Standaard bevat Form field een Text input.

Default

Invalid

Text input

Text area

Checkbox group

Radio group

Description

Form field label als Heading

---

Notities

• In Figma zijn verschillende inputs hierin meegenomen, zoals Text Input, Textarea, Checkbox Group en Radio Group.
• Form field label, Form field description en Form field error message zijn erin meegenomen.
• Form field error message is in Storybook onder de input en in Figma boven de input.
• Richtlijnen beschikbaar.

[Rozerinay]

✨ Dit component is nu Help Wanted ✨

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

[Rozerinay]

✨ Dit component is nu Community ✨

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