Checkboxen / Radios · FWT Dokumentation

Formulare / Checkboxen & Radios

Checkboxen und Radios in FWT

Checkboxen und Radios wirken klein, sind aber wichtige Formularfelder. Sie entscheiden darüber, ob Nutzer Optionen, Pakete, Einwilligungen oder Einstellungen klar verstehen.

FWT bietet dafür normale Checkboxen und Radios, Gruppen, Inline-Auswahlen, Auswahlkarten, Statusvarianten, Einwilligungsboxen und deaktivierte Zustände.

Wichtig: Checkboxen und Radios bleiben echte Formularfelder. fieldset und legend helfen, zusammengehörige Auswahlbereiche verständlich zu gruppieren.

Checkboxen

Normale Checkboxen

Checkboxen sind für Ja/Nein-Optionen oder Mehrfachauswahlen gedacht. Sie können mit Titel und Beschreibung ergänzt werden.

Live-Beispiel

Newsletter erhalten Gelegentliche Informationen zu neuen Funktionen und Updates. Auswahl merken

HTML-Code anzeigen

<div class="fwt-form">
    <label class="fwt-check">
        <input type="checkbox" name="newsletter">

        <span class="fwt-check-label">
            <span class="fwt-check-title">Newsletter erhalten</span>
            <span class="fwt-check-text">
                Gelegentliche Informationen zu neuen Funktionen und Updates.
            </span>
        </span>
    </label>

    <label class="fwt-check fwt-check-compact">
        <input type="checkbox" name="remember" checked>

        <span class="fwt-check-label">
            <span class="fwt-check-title">Auswahl merken</span>
        </span>
    </label>
</div>

Radios

Normale Radiobuttons

Radiobuttons sind sinnvoll, wenn aus mehreren Optionen genau eine ausgewählt werden soll.

Live-Beispiel

Kontaktart wählen

Per E-Mail Antwort an die angegebene E-Mail-Adresse. Telefonisch Rückruf, wenn eine Telefonnummer angegeben wurde.

HTML-Code anzeigen

<fieldset class="fwt-fieldset">
    <legend class="fwt-legend">Kontaktart wählen</legend>

    <div class="fwt-radio-group">
        <label class="fwt-radio">
            <input type="radio" name="contact" checked>

            <span class="fwt-radio-label">
                <span class="fwt-radio-title">Per E-Mail</span>
                <span class="fwt-radio-text">
                    Antwort an die angegebene E-Mail-Adresse.
                </span>
            </span>
        </label>

        <label class="fwt-radio">
            <input type="radio" name="contact">

            <span class="fwt-radio-label">
                <span class="fwt-radio-title">Telefonisch</span>
                <span class="fwt-radio-text">
                    Rückruf, wenn eine Telefonnummer angegeben wurde.
                </span>
            </span>
        </label>
    </div>
</fieldset>

Radiobuttons sollten fast immer in einem fieldset mit legend stehen.

Inline

Kurze Inline-Auswahlen

Inline-Auswahlen eignen sich für kurze Optionen wie Ja/Nein, Größen, einfache Filter oder kleine Einstellungen.

Live-Beispiel

Kurze Auswahl

Klein Mittel Groß

Optionale Bereiche

Typografie Links Formulare

HTML-Code anzeigen

<div class="fwt-form">
    <fieldset class="fwt-fieldset">
        <legend class="fwt-legend">Kurze Auswahl</legend>

        <div class="fwt-radio-inline">
            <label class="fwt-radio fwt-radio-compact">
                <input type="radio" name="size" checked>
                <span>Klein</span>
            </label>

            <label class="fwt-radio fwt-radio-compact">
                <input type="radio" name="size">
                <span>Mittel</span>
            </label>

            <label class="fwt-radio fwt-radio-compact">
                <input type="radio" name="size">
                <span>Groß</span>
            </label>
        </div>
    </fieldset>

    <fieldset class="fwt-fieldset">
        <legend class="fwt-legend">Optionale Bereiche</legend>

        <div class="fwt-check-inline">
            <label class="fwt-check fwt-check-compact">
                <input type="checkbox" checked>
                <span>Typografie</span>
            </label>

            <label class="fwt-check fwt-check-compact">
                <input type="checkbox">
                <span>Links</span>
            </label>

            <label class="fwt-check fwt-check-compact">
                <input type="checkbox">
                <span>Formulare</span>
            </label>
        </div>
    </fieldset>
</div>

Checkbox-Karten

Checkbox-Karten für sichtbare Mehrfachauswahl

Checkbox-Karten machen wichtige Mehrfachauswahlen sichtbarer als normale kleine Checkboxen. Sie eignen sich für Leistungen, Interessen, Filter oder Zusatzfunktionen.

Live-Beispiel

Zusatzfunktionen auswählen

Dokumentation Beispiele, Hinweise und Codeblöcke anzeigen. Empfohlen Demo-Daten Zusätzliche Beispieldaten für Tests bereitstellen. Systemcheck Dateien, Ordner und Einbindung automatisch prüfen. Ajax-Komfort Für Release II geplant.

HTML-Code anzeigen

<fieldset class="fwt-fieldset">
    <legend class="fwt-legend">Zusatzfunktionen auswählen</legend>

    <div class="fwt-check-card-grid">
        <label class="fwt-check-card">
            <input type="checkbox" checked>

            <span>
                <span class="fwt-check-card-title">Dokumentation</span>
                <span class="fwt-check-card-text">
                    Beispiele, Hinweise und Codeblöcke anzeigen.
                </span>
                <span class="fwt-check-card-meta">Empfohlen</span>
            </span>
        </label>

        <label class="fwt-check-card">
            <input type="checkbox">

            <span>
                <span class="fwt-check-card-title">Demo-Daten</span>
                <span class="fwt-check-card-text">
                    Zusätzliche Beispieldaten für Tests bereitstellen.
                </span>
            </span>
        </label>

        <label class="fwt-check-card">
            <input type="checkbox">

            <span>
                <span class="fwt-check-card-title">Systemcheck</span>
                <span class="fwt-check-card-text">
                    Dateien, Ordner und Einbindung automatisch prüfen.
                </span>
            </span>
        </label>

        <label class="fwt-check-card">
            <input type="checkbox" disabled>

            <span>
                <span class="fwt-check-card-title">Ajax-Komfort</span>
                <span class="fwt-check-card-text">
                    Für Release II geplant.
                </span>
            </span>
        </label>
    </div>
</fieldset>

Radio-Karten

Radio-Karten für wichtige Einzelauswahl

Radio-Karten eignen sich für Pakete, Versandarten, Zahlungsarten, Kontaktarten oder andere wichtige Einzelauswahlen.

Live-Beispiel

Paket auswählen

Basis Für einfache Seiten, Doku und kleine Webtools. Startpaket Erweitert Mehr Bausteine, mehr Muster und zusätzliche Doku. Für größere Projekte

HTML-Code anzeigen

<fieldset class="fwt-fieldset">
    <legend class="fwt-legend">Paket auswählen</legend>

    <div class="fwt-radio-card-grid">
        <label class="fwt-radio-card">
            <input type="radio" name="package" checked>

            <span>
                <span class="fwt-radio-card-title">Basis</span>
                <span class="fwt-radio-card-text">
                    Für einfache Seiten, Doku und kleine Webtools.
                </span>
                <span class="fwt-radio-card-price">Startpaket</span>
            </span>
        </label>

        <label class="fwt-radio-card">
            <input type="radio" name="package">

            <span>
                <span class="fwt-radio-card-title">Erweitert</span>
                <span class="fwt-radio-card-text">
                    Mehr Bausteine, mehr Muster und zusätzliche Doku.
                </span>
                <span class="fwt-radio-card-price">Für größere Projekte</span>
            </span>
        </label>
    </div>
</fieldset>

Status

Statusvarianten für Auswahlbereiche

Auswahlbereiche können Erfolg, Prüfung oder Fehler sichtbar machen. Farbe unterstützt die Bedeutung, ersetzt aber keinen erklärenden Text.

Live-Beispiel

Erledigt Doku-Seite ist angelegt Dieser Punkt wurde erfolgreich abgeschlossen.

Alles in Ordnung.

Prüfung nötig Mobile Ansicht kontrollieren Bitte auf kleinen Bildschirmen testen.

Dieser Punkt sollte noch geprüft werden.

Fehler Pflichtauswahl fehlt Ohne Auswahl kann das Formular nicht gesendet werden.

Bitte mindestens eine Option auswählen.

HTML-Code anzeigen

<div class="fwt-form">
    <fieldset class="fwt-fieldset fwt-check-field-success">
        <legend class="fwt-legend">Erledigt</legend>

        <label class="fwt-check">
            <input type="checkbox" checked>

            <span class="fwt-check-label">
                <span class="fwt-check-title">Doku-Seite ist angelegt</span>
                <span class="fwt-check-text">Dieser Punkt wurde erfolgreich abgeschlossen.</span>
            </span>
        </label>

        <p class="fwt-choice-help fwt-choice-help-success">
            Alles in Ordnung.
        </p>
    </fieldset>

    <fieldset class="fwt-fieldset fwt-check-field-warning">
        <legend class="fwt-legend">Prüfung nötig</legend>

        <label class="fwt-check">
            <input type="checkbox">

            <span class="fwt-check-label">
                <span class="fwt-check-title">Mobile Ansicht kontrollieren</span>
                <span class="fwt-check-text">Bitte auf kleinen Bildschirmen testen.</span>
            </span>
        </label>

        <p class="fwt-choice-help fwt-choice-help-warning">
            Dieser Punkt sollte noch geprüft werden.
        </p>
    </fieldset>

    <fieldset class="fwt-fieldset fwt-check-field-danger">
        <legend class="fwt-legend">Fehler</legend>

        <label class="fwt-check">
            <input type="checkbox">

            <span class="fwt-check-label">
                <span class="fwt-check-title">Pflichtauswahl fehlt</span>
                <span class="fwt-check-text">Ohne Auswahl kann das Formular nicht gesendet werden.</span>
            </span>
        </label>

        <p class="fwt-choice-help fwt-choice-help-danger">
            Bitte mindestens eine Option auswählen.
        </p>
    </fieldset>
</div>

Einwilligung

Datenschutz- und Einwilligungsboxen

Datenschutz, Newsletter, AGB oder ähnliche Einwilligungen sollten nicht versteckt werden. Nutzer müssen verstehen, wozu sie zustimmen.

Live-Beispiel

HTML-Code anzeigen

<div class="fwt-consent-box">
    <h3 class="fwt-consent-title">Datenschutzhinweis</h3>

    <p class="fwt-consent-text">
        Die eingegebenen Daten werden nur zur Bearbeitung der Anfrage verwendet.
        Weitere Informationen stehen in der Datenschutzerklärung.
    </p>

    <label class="fwt-check">
        <input type="checkbox" required>

        <span class="fwt-check-label">
            <span class="fwt-check-title">
                Ich habe den Datenschutzhinweis gelesen.
            </span>
            <span class="fwt-check-text">
                Diese Zustimmung ist erforderlich, damit die Anfrage gesendet werden kann.
            </span>
        </span>
    </label>
</div>

<div class="fwt-consent-box fwt-consent-box-warning">
    <h3 class="fwt-consent-title">Newsletter-Einwilligung</h3>

    <p class="fwt-consent-text">
        Newsletter dürfen nur nach aktiver Einwilligung versendet werden.
    </p>

    <label class="fwt-check">
        <input type="checkbox">

        <span class="fwt-check-label">
            <span class="fwt-check-title">
                Ich möchte den Newsletter erhalten.
            </span>
            <span class="fwt-check-text">
                Diese Auswahl ist freiwillig.
            </span>
        </span>
    </label>
</div>

Deaktiviert

Deaktivierte Checkboxen und Radios

Deaktivierte Optionen sollten klar erkennbar sein. Noch besser ist eine kurze Erklärung, warum eine Option nicht verfügbar ist.

Live-Beispiel

Nicht verfügbar Diese Option ist aktuell deaktiviert. Gesperrte Auswahl Diese Auswahl kann nicht gewählt werden.

HTML-Code anzeigen

<div class="fwt-form">
    <label class="fwt-check fwt-check-disabled">
        <input type="checkbox" disabled>

        <span class="fwt-check-label">
            <span class="fwt-check-title">Nicht verfügbar</span>
            <span class="fwt-check-text">
                Diese Option ist aktuell deaktiviert.
            </span>
        </span>
    </label>

    <label class="fwt-radio fwt-radio-disabled">
        <input type="radio" name="disabled-demo" disabled>

        <span class="fwt-radio-label">
            <span class="fwt-radio-title">Gesperrte Auswahl</span>
            <span class="fwt-radio-text">
                Diese Auswahl kann nicht gewählt werden.
            </span>
        </span>
    </label>
</div>

Barrierefreiheit

Checkboxen und Radios richtig verwenden

Fieldset nutzen

Zusammengehörige Auswahlfelder sollten gruppiert werden.

<fieldset class="fwt-fieldset">...</fieldset>

Legend setzen

Die Legend erklärt, worum es in der Auswahlgruppe geht.

<legend class="fwt-legend">Kontaktart wählen</legend>

Checkbox oder Radio?

Checkbox für Mehrfachauswahl. Radio für genau eine Auswahl.

<input type="checkbox"> / <input type="radio">

Label anklickbar machen

Das gesamte Label sollte anklickbar sein, nicht nur das kleine Feld.

<label class="fwt-check"><input type="checkbox">...</label>

Fehler erklären

Eine rote Box reicht nicht. Nutzer brauchen einen verständlichen Hinweis.

<p class="fwt-choice-help-danger">Bitte auswählen.</p>

Einwilligung klar formulieren

Datenschutz- oder Newsletter-Zustimmungen dürfen nicht versteckt werden.

<div class="fwt-consent-box">...</div>