Fieldset

[jeffreylauwers]

Naam

Fieldset

Doel

Groep van gerelateerde formuliervelden.

Gerelateerde componenten

Date Input Group, Text Input Group, Radio Group, Checkbox Group

Onderzoek

<fieldset>: The Fieldset element - MDN
Documentatie van Mozilla Developers Network over het <fieldset> HTML element.

Fieldset component - GOV.UK
Fieldset component zoals beschikbaar bij GOV.UK.

Fieldset Github Discussion - GOV.UK
In deze Discussion van GOV.UK wordt Fieldset component besproken.

Using the fieldset and legend elements
In dit artikel beschrijf Léonie Watson de toepassing van Fieldset en Legend.

Use Legend and Fieldset - Adrian Roselli
In dit artikel beschrijft Adrian Roselli de toepassing van Fieldset en Legend. Hij beschrijft onder andere:

• Een oplossing voor de layout.
• Hoe de combinatie van / en group / aria-labelledby wordt voorgelezen door schermlezers.

Fieldsets, Legends and Screen Readers again
In dit artikel beschrijft Steve Faulkner de toepassing van Fieldset en Legend. Hij beschrijft onder andere:

• Hoe een implementatie wordt voorgelezen door schermlezers.
• Dat headings binnen de legend element kunnen worden geplaatst.
• Hoe je met ARIA attributes ook voor groepering en labeling kan zorgen wanneer het niet mogelijk is om native HTML elementen te gebruiken.

Brief Note on Disclosures in Fieldsets - Adrian Roselli
In dit artikel beschrijf Adrian Roselli het gebruik van 'disclosure widgets' (zoals bijvoorbeeld een Toggletip) in combinatie met Fieldsets.

[jeffreylauwers]

Amsterdam

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Default

With Description

With Error

Radio group

Radio group with error

Checkbox group

Checkbox group with error

---

Notities

Uitgebreide documentatie aanwezig voor implementatie.

[VincentSmedinga]

We schrijven de naam van dit component als twee losse woorden: Field Set.

Zo zou het in een Engelse zin ook geschreven worden. De namen van HTML-elementen moffelen spaties weg, bijv. ook voor blockquote (block quote), colgroup (column group) en figcaption (figure caption), en dat is in fieldset dus ook gebeurd.

Ook inhoudelijk klopt het: een Field Set kan een verzameling Fields bevatten, zoals meerdere adresvelden. Overigens zijn zelfs geneste Field Sets mogelkijk, zoals een lijst Radios die samen met andere velden in een Field Set hoort. Als directe kinderen van een Form mogen dus ook zowel Fields als Field Sets bestaan.

Overigens noemen we Field dus ook niet Form Field – dan zou je hier ook Form Field Set moeten aanhouden en dan wordt het wel wat lang allemaal. We verwachten het concept ‘Field’ niet buiten formulieren nodig te hebben of accepteren dat we in dat geval een andere naam moeten vinden.

Zie ook mijn reactie bij Form Field.

[jeffreylauwers]

Den Haag

• Storybook
• Figma (Huidig)
• Github

---

Screenshots / Varianten

Storybook

Figma (huidig)

---

Notities

• Lijkt gebruik te maken van Fieldset van OpenFormulieren (zie Storybook)
• Documentatie aanwezig in Figma

[jeffreylauwers]

Open Formulieren

Storybook

---

Screenshots / Varianten

Storybook

---

Notities

• Documentatie aanwezig in Storybook.
• Property beschikbaar om de legend te verbergen.
• Lijkt door Den Haag gebruikt te worden.

[jeffreylauwers]

OpenGemeenten

Patternlab

---

Screenshots / Varianten

Patternlab

Fieldset

Fieldset NoLabel

---

Notities

Variant beschikbaar om de legend te verbergen.

[jeffreylauwers]

RVO

• Documentatie website
• Storybook
• Figma
• Github

---

Screenshots / Varianten

Documentatie website

Storybook

Figma

---

Notities

• Fieldset heeft een achtergrondkleur
• In Storybook is er een 'disabled' property beschikbaar.

[jeffreylauwers]

Utrecht

• Storybook
• Github

---

Screenshots / Varianten

Storybook

Default

Without CSS

<div> as markup

Disabled
Een veldengroep waar alle velden disabled zijn.

Section

Invalid
Een veldengroep die niet valide is. Gebruik deze voor veldengroepen de als geheel gevalideerd worden, bijvoorbeeld een radio group of een checkbox group. Gebruik invalid niet voor veldengroepen waar één los onderdeel invalide is, bijvoorbeeld: als één van de vragen nog niet beantwoord is.

---

Notities

• Uitgebreide documentatie aawezig.
• Veel states uitgewerkt.

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

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