Molecules
Molecules entstehen aus Atoms und bilden wiederverwendbare UI-Elemente mit konkretem Zweck.
Form Field
Section titled “Form Field”States
Section titled “States”- Default
- Focus
- Error
- Disabled
Variants
Section titled “Variants”- Single Line
- With Helper Text
- With Error Message
Accessibility
Section titled “Accessibility”- Label und Input klar verknüpft
- Fehlermeldungen über
aria-describedby - Fokuslogik bleibt stabil
- Hilfetexte kurz halten
- Fehlertexte aktiv und konkret formulieren
- Pflichtfelder sichtbar markieren
States
Section titled “States”- Default
- Hover
- Active
- Disabled
Variants
Section titled “Variants”- With Image
- With Action
- With Footer
Accessibility
Section titled “Accessibility”- Klickbare Cards mit eindeutiger Fokus-Outline
- Inhalte semantisch korrekt strukturiert
- Cards gruppieren verwandte Inhalte
- Nicht jede Card ist ein Link
- Primäre Aktion klar hervorheben
Dropdown
Section titled “Dropdown”States
Section titled “States”- Closed
- Open
- Focus
- Disabled
Variants
Section titled “Variants”- Single Select
- Multi Select
- Searchable
Accessibility
Section titled “Accessibility”- Tastatursteuerung für Öffnen, Navigieren, Schliessen
aria-expandedundaria-controlskorrekt setzen
- Bei weniger als 6 Optionen lieber Radio Buttons
- Auswahl eindeutig anzeigen
- Optionstexte kurz halten