024 · Side-Round

Input. Styles

Moderne, barrierefreie Input-Felder für 2verify: Text, PIN, Dropdown, Toggle, Checkbox, Suche. Je 3–4 Varianten mit Zuständen. Alle in der R4-Designsprache (Inter, 8 px, Salbei-Grün, warmes Papier).
Barrierefreiheit durchgehend: Min. 48 px Touch-Targets, hohe Kontraste, sichtbarer Fokus-Ring (3 px Salbei-Schatten), Fehler-Farbe Rot + Icon + Text (nie nur Farbe). Labels immer sichtbar — kein Placeholder-als-Label-Anti-Pattern.
Text-Eingaben
01 / BoxedVoller Rand · 8 px
Leer
Fokus
8-stellig, ohne Leerzeichen
Gefüllt
Fehler
Kundennummer nicht gefunden
Boxed — Standard-ReferenzVoller Rand, Label oben. Am klarsten, am sichersten für 45+. Der iOS-Klassiker.
02 / UnderlineNur Unterlinie · Float-Label
Leer
Kundennummer
Fokus
Kundennummer
Gefüllt
Kundennummer
Fehler
Kundennummer
Nicht gefunden
Underline — Material-StilFloating Label schwebt hoch bei Fokus. Elegant, spart Platz. Etwas weniger klar als Boxed für ältere Nutzer.
03 / FilledHintergrund-Fläche
Leer
Fokus
Gefüllt
Fehler
Nicht gefunden
Filled — Weiche FlächeLeinen-Hintergrund statt Rand. Wechselt auf Weiß bei Fokus. Passt am besten zur Stille-Papier-Ästhetik.
04 / PillVoll gerundet
Leer
Fokus
Gefüllt
Fehler
Nicht gefunden
Pill — OrganischVoll gerundet (24 px). Passt zu 021 Kiesel. Verspielter, fühlt sich freundlicher an als Boxed.
PIN-Eingabe
05 / Punkte007-Stil modernisiert
Eingabe läuft (4/6)
Leer
Fehler
Falsche PIN — noch 2 Versuche
Punkte — 007-DNA6 Kreise, Fokus hat Sage-Ring. Sicher (PIN nicht sichtbar), aber kein visuelles Digit-Feedback.
06 / BoxenSegmentiert · 8 px
Eingabe läuft (4/6)
4892
Leer
Fehler
489210
Falsche PIN
Boxen — Digit-sichtbarJede Ziffer in eigener Box. Besser für Onboarding (Aktivierungscode), wo man die Eingabe sehen muss.
07 / LinienUnderline-Segmente
Eingabe läuft (4/6)
4892
Leer
Fehler
489210
Falsche PIN
Linien — MinimalNur Unterstriche, passt zum Underline-Text-Stil. Am leichtesten — Haarlinien-Disziplin aus 007.
08 / EinzelfeldTracking-Feld
Eingabe läuft
Leer
Fehler
Falsche PIN
Einzelfeld — TrackingEin Feld, breites Letter-Spacing. Am einfachsten zu implementieren. Weniger fancy, aber robust.
Steuerungen (Toggle, Checkbox, Dropdown, Suche)
09 / ToggleiOS-nativ + Pill
iOS-Toggle
Face ID aktiviert
Push-Mitteilungen
Pill-Toggle
DeutschEnglish
PasswortFace ID
Toggle — zwei TypeniOS-nativ für Ja/Nein. Pill-Toggle für Entweder/Oder (Sprache, Auth-Methode). Beide ≥ 48 px.
10 / CheckboxEckig + Rund
Runde Checkbox
Ich akzeptiere die Nutzungsbedingungen und die Datenschutz­erklärung
Eckige Checkbox
Auf diesem Gerät merken
Push-Mitteilungen erlauben
Fehler
Bitte bestätigen Sie die Nutzungsbedingungen
Pflichtfeld
Checkbox — zwei Radii6 px (eckig) oder rund. Sage-Grün bei aktiv. 22 px Hitbox + Text = gut tippbar.
11 / DropdownBoxed + Pill
Boxed
Fokus
Pill
Dropdown — Native SelectNative iOS-Select mit Sage-Fokusring. Pill-Variante passt zu Kiesel (021). Chevron-Icon rechts.
12 / SucheFilled + Pill
Filled
Fokus
Pill
Suche — Filled + PillIcon links, gefüllter Hintergrund. Pill-Variante für Header-Suche oder FAQ.
Mini-Formulare (Komposition)
Boxed-Stil · Kundennummer hinzufügen
A7K2
Filled-Stil · Einstellungen
Face ID
Push-Mitteilungen
iCloud-Backup
Pill-Stil · Login
Willkommen
PIN eingeben oder Face ID nutzen
Face ID verwenden
PIN vergessen?

Empfehlung nach Zielgruppe

45+: 01 Boxed (Text) + 05 Punkte oder 06 Boxen (PIN). Am klarsten, keine Ambiguität.

Modern/Fancy: 03 Filled (Text) + 07 Linien (PIN). Passt am besten zur Stille-Ästhetik.

Kompromiss: 03 Filled für Text + 06 Boxen für PIN. Modern, aber jedes Feld ist eindeutig erkennbar.

Barrierefreiheit

Alle Varianten teilen: 3 px Sage-Fokusring, Label immer sichtbar, Fehler = Rot + Icon + Text, min. 48 px Höhe.

02 Underline (Floating Label) birgt ein Risiko: der Label-Sprung kann für ältere Nutzer irritierend sein. Im Zweifel: Boxed oder Filled.

Konsistenz-Regel

Ein Stil pro App — nicht mischen. Wenn Boxed, dann überall Boxed. Ausnahme: PIN darf anders sein als Text (weil es ein anderer Input-Typ ist).

Toggle-Typ: iOS-nativ für Ja/Nein, Pill für Entweder/Oder. Das darf sich unterscheiden.