FigmaOpenCode

Fieldset

Synonyme: Formulargruppe, Eingabebereich, Formularabschnitt
Ähnliche Komponenten: –

Kurzbeschreibung

Ein Fieldset gruppiert zusammengehörige Formularfelder und kann eine Hierarchie aufbauen. Es wird verwendet, um verwandte Elemente in einem Formular visuell und semantisch zu gruppieren.

Beispiele

Gruppierte Formularfelder

Code anzeigen

<fieldset class="kern-fieldset">
<legend class="kern-label kern-label--large">
  Ansprechpartner
</legend>
<div class="kern-fieldset__body">
  <div class="kern-form-input">
    <label class="kern-label" for="vorname">Vorname</label>
    <input class="kern-form-input__input" id="vorname" name="vorname" type="text">
  </div>
  <div class="kern-form-input">
    <label class="kern-label" for="name">Familienname</label>
    <input class="kern-form-input__input" id="name" name="name" type="text">
  </div>
<div>
</fieldset>

Hinweistext und Fehlermeldung

Code anzeigen

<fieldset class="kern-fieldset kern-fieldset--error">
<legend class="kern-label kern-label--large">
  Ansprechpartner
</legend>
<div class="kern-hint" id="hint-text">Ein Hinweis gibt Hilfestellung zum Format oder eine Begründung, warum diese Information benötigt wird.</div>
<div class="kern-fieldset__body">
  <div class="kern-form-input">
    <label class="kern-label" for="vorname">Vorname</label>
    <input class="kern-form-input__input" id="vorname" name="vorname" type="text" aria-describedby="kern-error">
  </div>
  <div class="kern-form-input">
    <label class="kern-label" for="name">Familienname</label>
    <input class="kern-form-input__input kern-form-input__input--error" id="name" name="name" type="text" aria-describedby="kern-error">
  </div>
</div>
<p class="kern-error" id="kern-error" role="alert">
  <span class="kern-icon kern-icon--danger" aria-hidden="true"></span>
  <span class="kern-body">Eine konstruktive Fehlermeldung vermittelt, was Nutzende tun können, um das Problem zu lösen.</span>
</p>
</fieldset>

Horizontale Ausrichtung

Code anzeigen

<fieldset class="kern-fieldset">
<legend class="kern-label">
Wo sind Sie aktuell gemeldet?
</legend>
<div class="kern-fieldset__body kern-fieldset__body--horizontal">
<div class="kern-form-check">
  <input class="kern-form-check__radio" id="hamburg" name="meldeadresse" type="radio">
  <label class="kern-label" for="hamburg">in Hamburg</label>
</div>
<div class="kern-form-check">
  <input class="kern-form-check__radio" id="ausland" name="meldeadresse" type="radio">
  <label class="kern-label" for="ausland">im Ausland</label>
</div>
<div>
</fieldset>

Beschreibung

Ein Fieldset besteht aus einer Legende (<legend>) und einer Gruppe von zusammengehörigen Formularelementen, wie z. B. Checkboxen oder Eingabefeldern. Die Legende beschreibt den Inhalt der Gruppe möglichst prägnant und trägt zur besseren Orientierung bei – insbesondere für Nutzende mit Assistenztechnologien.
Standardmäßig nutzt die Legende die CSS-Klasse kern-label, um eine einheitliche Beschriftung im Stil anderer Formularlabels sicherzustellen. Bei Bedarf kann sie durch die zusätzliche Klasse kern-label--large vergrößert werden, um inhaltliche Hierarchien innerhalb eines Formulars visuell hervorzuheben.
Ergänzend kann oberhalb der Gruppe ein Hinweistext erscheinen, z. B. zum Format oder zur erwarteten Eingabe. Fehlermeldungen, die sich auf die gesamte Gruppe beziehen, werden unterhalb des Fieldsets angezeigt.
Die enthaltenen Formularelemente können sowohl vertikal als auch horizontal angeordnet werden. Eine horizontale Anordnung erfolgt mithilfe der CSS-Klasse .kern-fieldset__content--horizontal.

Verwendungsregeln

Ein Fieldset dient der logischen Gruppierung zusammengehöriger Formularelemente – unabhängig vom Eingabetyp. Es verbessert die visuelle Struktur und sorgt für eine bessere Zugänglichkeit, insbesondere für Screenreader. Besonders sinnvoll ist der Einsatz bei mehrteiligen Angaben wie Adressen oder Datumsfeldern sowie bei Checkbox- und Radiogruppen, die sich auf eine gemeinsame Frage beziehen.
Bei Fehlermeldungen, die sich auf eine ganze Gruppe beziehen, sollte die Meldung innerhalb des Fieldsets platziert und über das Attribut ‘aria-describedby’ mit dem Fieldset oder den zugehörigen Feldern verknüpft werden.

Dos und Don’ts

• Verwende Fieldsets nur für inhaltlich zusammenhängende Elemente.
• Für Checkbox-Listen und Radios ist ein Fieldset zwingend erforderlich.
• Verwende kein Fieldset bei einer einzelnen Checkbox, z. B. bei dem Akzeptieren einer Datenschutzerklärung.
• Nutze Fieldsets nur, wenn eine gemeinsame Legende, Fehlermeldung und ein Hinweis sinnvoll sind.
• Verwende eine klare und prägnante Beschriftung für die Legende (<legend>).
• Lasse die Legende (<legend>) nicht leer.
• Verwende CSS-Klassen, um die visuelle Darstellung des Fieldsets anzupassen.
• Formularfeldgruppen sollten nicht ineinander verschachtelt werden.

Barrierefreiheit

Diese Komponente erfüllt die formalen Eigenschaften (Größe, Kontrastverhältnis) für barrierefreie Dienste. Achte in der angewandten Nutzung darauf, dass die Legende und Labels auch für Menschen mit kognitiven Beeinträchtigungen verständlich sind.

• Das <legend>-Element sollte eine klare und prägnante Beschreibung des Inhalts des Fieldsets bieten.
• Verwende das aria-describedby-Attribut, um Fehlermeldungen mit den entsprechenden Eingabefeldern zu verknüpfen.
• Stelle sicher, dass alle Eingabefelder innerhalb des Fieldsets über entsprechende Labels verfügen.
• Verwende keine Sonderzeichen als Icons innerhalb von Labels, da diese vom Screenreader als Schrift interpretiert und vorgelesen werden können.
• Falls Sonderzeichen zwingend genutzt werden müssen, sollten diese über ein aria-hidden="true" für den Screenreader versteckt werden.
• Inaktive Eingabefelder sollten über ein aria-disabled="true" ausgezeichnet werden und nicht nur mittels disabled. Diese Felder müssen trotz Inaktivität per Tastatur ansteuerbar und für den Screenreader ausgebbar sein.
• Für die Sprachsteuerung muss die sichtbare Beschriftung eines Eingabefelds auch mit dem „assistiven“ Namen (z. B. aria-label) übereinstimmen bzw. Inhalt von dessen sein.

Siehe auch: BFIT Handreichungen