UI/UX
Shield-Text-Input UI/UX
Designrichtlinien, Verwendungsregeln und visuelle Anatomie für diese Komponente.
Anatomy
Das Text-Input besteht aus einem Label, dem Eingabefeld und einem optionalen Hilfe- oder Fehlertext. Label und Feld sind programmatisch verknüpft.
Label & Placeholder
Do
- Immer ein sichtbares Label verwenden – auch bei platzsparenden Layouts.
- Placeholder für kurze Format-Hinweise nutzen (z.B. 'DD.MM.YYYY').
- Pflichtfelder klar kennzeichnen.
Don't
- Placeholder nicht als Ersatz für das Label verwenden – er verschwindet bei Eingabe.
- Kein langer Hilfetext im Placeholder – dafür separaten Hilfetext nutzen.
Zustände
- Default: Eingabe möglich, Label sichtbar.
- Focus: Hervorgehobener Rahmen zeigt Fokus an.
- Filled: Wert im Feld, Label bleibt sichtbar.
- Disabled: Keine Interaktion, reduzierter Kontrast.
- Error: Roter Rahmen und Fehlertext direkt unter dem Feld.
Formular-Kontext
Do
- Felder logisch gruppieren (z.B. Adressblock zusammen).
- Fehlermeldungen direkt beim betroffenen Feld anzeigen.
- Autocomplete-Attribute setzen für Browser-Unterstützung.
Don't
- Nicht zu viele Pflichtfelder in einem Formular – kognitive Last minimieren.
- Validierung nicht erst beim Submit – Inline-Feedback bevorzugen.