Fieldset

Fieldsets gruppieren zusammengehörige Formularfelder semantisch und visuell.
Sie eignen sich besonders für Checkbox-Gruppen, Radio-Gruppen oder logisch zusammengehörige Formbereiche.

Beispiele

Basic

Benutzer

Inhalt


<fieldset class="m-fieldset">
    <legend class="m-fieldset__legend">
        Benutzer
    </legend>

    <div class="m-fieldset__content">
        Inhalt
    </div>
</fieldset>

Checkbox Group

Benachrichtigungen

E-Mail Benachrichtigungen Push Benachrichtigungen


<fieldset class="m-fieldset">
    <legend class="m-fieldset__legend">
        Benachrichtigungen
    </legend>

    <div class="m-fieldset__content">
        <label class="a-checkbox">
            <input class="a-checkbox__input" type="checkbox">
            <span class="a-checkbox__box"></span>
            <span class="a-checkbox__label">E-Mail Benachrichtigungen</span>
        </label>

        <label class="a-checkbox">
            <input class="a-checkbox__input" type="checkbox">
            <span class="a-checkbox__box"></span>
            <span class="a-checkbox__label">Push Benachrichtigungen</span>
        </label>
    </div>
</fieldset>

Radio Group

Farbe

Blau Grün Rot


<fieldset class="m-fieldset">
    <legend class="m-fieldset__legend">
        Farbe
    </legend>

    <div class="m-fieldset__content">
        <label class="a-radio">
            <input class="a-radio__input" type="radio" name="fieldset-color" checked>
            <span class="a-radio__circle"></span>
            <span class="a-radio__label">Blau</span>
        </label>

        <label class="a-radio">
            <input class="a-radio__input" type="radio" name="fieldset-color">
            <span class="a-radio__circle"></span>
            <span class="a-radio__label">Grün</span>
        </label>

        <label class="a-radio">
            <input class="a-radio__input" type="radio" name="fieldset-color">
            <span class="a-radio__circle"></span>
            <span class="a-radio__label">Rot</span>
        </label>
    </div>
</fieldset>

Nested Form Groups

Kontakt

Name

Nachricht


<fieldset class="m-fieldset">
    <legend class="m-fieldset__legend">
        Kontakt
    </legend>

    <div class="m-fieldset__content">
        <div class="m-form-group -required">
            <label class="m-form-group__label" for="fieldset-name">
                Name
            </label>

            <input
                class="a-input"
                id="fieldset-name"
                type="text"
                required>
        </div>

        <div class="m-form-group">
            <label class="m-form-group__label" for="fieldset-message">
                Nachricht
            </label>

            <textarea
                class="a-textarea"
                id="fieldset-message"></textarea>
        </div>
    </div>
</fieldset>

Klassen

Klasse	Beschreibung
`.m-fieldset`	Container des Fieldsets.
`.m-fieldset__legend`	Titel oder Beschreibung der Formulargruppe.
`.m-fieldset__content`	Inhaltsbereich des Fieldsets.

Hinweise

Fieldsets sollten verwendet werden, wenn mehrere Formularfelder logisch zusammengehören. Besonders sinnvoll sind sie bei Checkbox- und Radio-Gruppen.

Best Practices

Verwende Fieldsets zur Gruppierung zusammengehöriger Formularfelder. Die Legend sollte die Gruppe eindeutig beschreiben.

Verwende Fieldsets nicht nur für optische Abstände. Wenn keine semantische Gruppe entsteht, ist eine Card oder Form Group meist passender.

Accessibility

<fieldset> und <legend> helfen assistiven Technologien, zusammengehörige Formularfelder korrekt zu erkennen.