Zum Hauptinhalt
GEV Design System / Komponenten Demo

Wiederverwendbare Bausteine

Komponenten

Frameworkunabhängig Tastaturbedienbar Hell und dunkel
Komponentendokumentation

Aktionshierarchie

Buttons

Eine primäre Aktion pro Arbeitsbereich

Buttontexte beschreiben die tatsächliche Folge mit einem Verb.

Formulargruppen

Zusammengehörige Angaben stehen in einer Karte. Der Titel sitzt innerhalb der Karte mit Abstand zum durchgehenden Rahmen. Native Fieldsets und Legends erhalten den Gruppennamen für Screenreader.

Mitgliedschaft und Teilnahmegebühr *

Bitte wählen Sie den passenden Beitrag. Beispiel ohne Anmeldung oder Zahlung.

Angaben zum Hund

Nur synthetische Beispieldaten eingeben.

Verwendung

.gev-form-group gruppiert Radios, Checkboxen und zusammengehörige Eingaben. Die legend ist das erste Kind; alle Inhalte folgen in .gev-form-group__body. Mehrzeilige Titel wachsen mit, die Inhalte bleiben darunter. Einzelne Eingaben behalten ihr eigenes Label.

Innenabstand: 24 px, auf kleinen Bildschirmen 16 px. Titel: 16 px, semibold. Abstand zu den Inhalten: 20 px. Farben und Rahmen folgen dem hellen oder dunklen Theme.

Pflichtauswahlen werden nicht vorausgewählt. Hinweise und Fehler über aria-describedby verbinden; required und disabled bleiben native Attribute. Ein Gruppentitel ersetzt keine Feldlabels.

HTML-Beispiel 
<fieldset class="gev-form-group" aria-describedby="group-hint">
  <legend>Mitgliedschaft und Teilnahmegebühr *</legend>
  <div class="gev-form-group__body">
    <label class="gev-check">
      <input type="radio" name="membership" value="drv" required />
      <span>Mitglied im DRV: 250€</span>
    </label>
    <p id="group-hint" class="gev-field__hint">Bitte auswählen.</p>
  </div>
</fieldset>

Strukturierte Daten

Tabelle

Prüfpunkt Zustand Stand
Quelle Bestätigt 14:22 UTC
Freigabe Offen 14:30 UTC

Wartestatus

Ladezustand

Letzte erfolgreiche Aktualisierung: 14:22 UTC

Keine Datensätze für diesen Filter

Leere Zustände erklären den Grund und bieten eine sinnvolle nächste Handlung.