Direkt zum Inhalt springen

Freie Webtools

Dokumentation

Aufbau, Einbindung und Beispiele für das FWT-System. Verständlich erklärt, sichtbar gezeigt und direkt nutzbar.

CSS-System Dokumentation Datenschutzfreundlich

Formulare / Selects

Selects und Multiselect in FWT

Auswahlfelder sind praktisch, können aber schnell unübersichtlich werden. FWT trennt deshalb einfache Selects, Optionsgruppen, Mehrfachselects und spätere Komfort-Auswahlen klar voneinander.

Für Release I bleibt alles ohne JavaScript nutzbar. Der spätere Komfort-Multiselect wird als zusätzliche Schicht geplant, nicht als Ersatz für eine funktionierende HTML-Grundlage.

Wichtig: Wenn mehrere Werte gewählt werden können, muss das für Nutzer klar erklärt werden.

Basis

Normales Select

Ein normales Select eignet sich für kurze, überschaubare Auswahlfelder. Es sollte nicht für sehr lange oder unklare Listen missbraucht werden.

Live-Beispiel

Ein normales Select eignet sich für überschaubare Auswahllisten.

HTML-Code anzeigen 
<div class="fwt-form">
    <div class="fwt-form-group">
        <label class="fwt-label" for="select-topic">
            Thema auswählen
        </label>

        <select class="fwt-select" id="select-topic" name="topic">
            <option value="">Bitte wählen</option>
            <option>Allgemeine Anfrage</option>
            <option>Webseite</option>
            <option>Designsystem</option>
            <option>Technische Hilfe</option>
        </select>

        <p class="fwt-help">
            Ein normales Select eignet sich für überschaubare Auswahllisten.
        </p>
    </div>
</div>

Größen

Select-Größen

Selects können kompakter oder größer dargestellt werden. Die normale Größe sollte der Standard bleiben.

Live-Beispiel
HTML-Code anzeigen 
<div class="fwt-form">
    <div class="fwt-form-group">
        <label class="fwt-label" for="select-small">
            Kleines Select
        </label>

        <select class="fwt-select fwt-select-sm" id="select-small">
            <option>Kompakte Auswahl</option>
            <option>Option 1</option>
            <option>Option 2</option>
        </select>
    </div>

    <div class="fwt-form-group">
        <label class="fwt-label" for="select-normal">
            Normales Select
        </label>

        <select class="fwt-select" id="select-normal">
            <option>Normale Auswahl</option>
            <option>Option 1</option>
            <option>Option 2</option>
        </select>
    </div>

    <div class="fwt-form-group">
        <label class="fwt-label" for="select-large">
            Großes Select
        </label>

        <select class="fwt-select fwt-select-lg" id="select-large">
            <option>Große Auswahl</option>
            <option>Option 1</option>
            <option>Option 2</option>
        </select>
    </div>
</div>

Optionsgruppen

Auswahlfelder mit Optionsgruppen

Optionsgruppen sind sinnvoll, wenn viele Optionen in fachliche Gruppen aufgeteilt werden können.

Live-Beispiel

Optionsgruppen helfen, längere Auswahlfelder verständlicher zu gliedern.

HTML-Code anzeigen 
<div class="fwt-form">
    <div class="fwt-form-group">
        <label class="fwt-label" for="select-area">
            Bereich auswählen
        </label>

        <select class="fwt-select" id="select-area" name="area">
            <option value="">Bitte wählen</option>

            <optgroup label="Inhalt">
                <option>Typografie</option>
                <option>Links</option>
                <option>Code / Terminal</option>
                <option>Listen</option>
                <option>Bilder</option>
                <option>Tabellen</option>
            </optgroup>

            <optgroup label="Formulare">
                <option>Formular-Grundlagen</option>
                <option>Inputs / Eingabeelemente</option>
                <option>Selects / Multiselect</option>
                <option>Checkboxen / Radios</option>
            </optgroup>

            <optgroup label="Komponenten">
                <option>Buttons</option>
                <option>Cards</option>
                <option>Alerts</option>
            </optgroup>
        </select>

        <p class="fwt-help">
            Optionsgruppen helfen, längere Auswahlfelder verständlicher zu gliedern.
        </p>
    </div>
</div>

Select-Gruppen

Mehrere Selects nebeneinander

Mehrere zusammengehörige Selects können nebeneinander stehen. Auf kleinen Bildschirmen brechen sie automatisch untereinander um.

Live-Beispiel
HTML-Code anzeigen 
<div class="fwt-select-grid fwt-select-grid-3">
    <div class="fwt-form-group">
        <label class="fwt-label" for="select-day">
            Tag
        </label>

        <select class="fwt-select" id="select-day">
            <option>Montag</option>
            <option>Dienstag</option>
            <option>Mittwoch</option>
        </select>
    </div>

    <div class="fwt-form-group">
        <label class="fwt-label" for="select-month">
            Monat
        </label>

        <select class="fwt-select" id="select-month">
            <option>Januar</option>
            <option>Februar</option>
            <option>März</option>
        </select>
    </div>

    <div class="fwt-form-group">
        <label class="fwt-label" for="select-year">
            Jahr
        </label>

        <select class="fwt-select" id="select-year">
            <option>2026</option>
            <option>2027</option>
            <option>2028</option>
        </select>
    </div>
</div>

Mehrfachselect

Mehrfachselect als HTML-Grundlage

Der normale HTML-Mehrfachselect ist nicht besonders hübsch, aber stabil. Er funktioniert ohne JavaScript und bleibt deshalb die sichere Grundlage für Release I.

Live-Beispiel

Mehrfachauswahl als sichere HTML-Grundlage. Je nach Gerät werden mehrere Einträge mit Strg, Shift oder Touch-Gesten gewählt.

HTML-Code anzeigen 
<div class="fwt-form">
    <div class="fwt-form-group">
        <label class="fwt-label" for="select-multiple-basic">
            Mehrere Bereiche auswählen
        </label>

        <select
            class="fwt-select fwt-select-multiple"
            id="select-multiple-basic"
            name="areas[]"
            multiple
            size="8"
        >
            <option>Typografie</option>
            <option>Links</option>
            <option>Code / Terminal</option>
            <option>Listen</option>
            <option>Bilder</option>
            <option>Figuren & Medien</option>
            <option>Tabellen</option>
            <option>Formulare</option>
        </select>

        <p class="fwt-help">
            Mehrfachauswahl als sichere HTML-Grundlage. Je nach Gerät werden
            mehrere Einträge mit Strg, Shift oder Touch-Gesten gewählt.
        </p>
    </div>
</div>
Der Nachteil: Die Bedienung ist je nach Gerät unterschiedlich. Deshalb braucht ein Mehrfachselect immer einen kurzen Hilfetext.

Auswahlentscheidung

Welche Auswahl passt?

Nicht jedes Auswahlproblem gehört in ein Select. Manchmal sind Radiobuttons, Checkboxen oder Optionskarten verständlicher.

Live-Beispiel

Normales Select

Gut für kurze, klare Auswahllisten mit wenigen Optionen.

Optionsgruppen

Gut, wenn viele Optionen in erkennbare Bereiche aufgeteilt werden sollen.

Mehrfachselect

Gut, wenn mehrere Werte gleichzeitig ausgewählt werden dürfen.

HTML-Code anzeigen 
<div class="fwt-choice-list">
    <article class="fwt-choice-card">
        <h3 class="fwt-choice-card-title">
            Normales Select
        </h3>

        <p class="fwt-choice-card-text">
            Gut für kurze, klare Auswahllisten mit wenigen Optionen.
        </p>
    </article>

    <article class="fwt-choice-card">
        <h3 class="fwt-choice-card-title">
            Optionsgruppen
        </h3>

        <p class="fwt-choice-card-text">
            Gut, wenn viele Optionen in erkennbare Bereiche aufgeteilt werden sollen.
        </p>
    </article>

    <article class="fwt-choice-card">
        <h3 class="fwt-choice-card-title">
            Mehrfachselect
        </h3>

        <p class="fwt-choice-card-text">
            Gut, wenn mehrere Werte gleichzeitig ausgewählt werden dürfen.
        </p>
    </article>
</div>
Faustregel: Je wichtiger die Auswahl ist, desto sichtbarer sollte sie dargestellt werden.

Release II

FWT-Multiselect als spätere Komfortschicht

Für Release II kann FWT einen besseren Multiselect bekommen: mit Suche, sichtbaren Chips, Checkboxliste, Tastatursteuerung und sauberem Fallback.

Visuelle Vorschau
  • Typografie
  • Formulare

Visuelle Vorschau für Release II. Die funktionierende Grundlage bleibt in Release I der normale HTML-Mehrfachselect.

HTML-Code anzeigen 
<div class="fwt-multiselect-ui">
    <div class="fwt-multiselect-ui-head">
        <label class="fwt-label" for="multiselect-ui-search">
            Multiselect-Vorschau
        </label>

        <input
            class="fwt-input fwt-input-search fwt-multiselect-ui-search"
            id="multiselect-ui-search"
            type="search"
            placeholder="Bereich suchen"
            disabled
        >
    </div>

    <ul class="fwt-multiselect-ui-selected">
        <li class="fwt-multiselect-ui-chip">
            Typografie
            <span aria-hidden="true">×</span>
        </li>

        <li class="fwt-multiselect-ui-chip">
            Formulare
            <span aria-hidden="true">×</span>
        </li>
    </ul>

    <div class="fwt-multiselect-ui-options">
        <label class="fwt-multiselect-ui-option is-selected">
            <input type="checkbox" checked disabled>
            <span>Typografie</span>
        </label>

        <label class="fwt-multiselect-ui-option">
            <input type="checkbox" disabled>
            <span>Links</span>
        </label>

        <label class="fwt-multiselect-ui-option is-selected">
            <input type="checkbox" checked disabled>
            <span>Formulare</span>
        </label>

        <label class="fwt-multiselect-ui-option">
            <input type="checkbox" disabled>
            <span>Tabellen</span>
        </label>
    </div>

    <p class="fwt-multiselect-ui-footer">
        Visuelle Vorschau für Release II. Die funktionierende Grundlage bleibt
        in Release I der normale HTML-Mehrfachselect.
    </p>
</div>
Wichtig: Der Komfort-Multiselect darf die normale HTML-Grundlage nicht ersetzen, sondern nur verbessern.

Barrierefreiheit

Selects richtig verwenden

Label immer setzen

Jedes Select braucht ein sichtbares Label.

<label class="fwt-label" for="auswahl">Auswahl</label>

Erste Option sinnvoll wählen

Eine leere erste Option sollte klar sagen, dass gewählt werden muss.

<option value="">Bitte wählen</option>

Mehrfachauswahl erklären

Nutzer müssen wissen, dass mehrere Werte gewählt werden können.

<select class="fwt-select" multiple>...</select>

Nicht zu lange Listen

Sehr lange Selects sind oft unübersichtlich. Dann besser Suche oder andere Muster planen.

Release II: Suche + Multiselect

Optgroups nutzen

Optionsgruppen können längere Auswahllisten besser strukturieren.

<optgroup label="Inhalt">...</optgroup>

JavaScript nur als Komfort

Erweiterte Selects müssen auch ohne JavaScript nutzbar bleiben.

<select multiple>...</select>