Formulare

Eingabefelder

Vorschau

E-Mail-Adresse

name@bauer-group.com

Fokussiertes Feld

Karl Bauer

Validierung — Vorschau

Valide

karl@bauer-group.com

Fehlerhaft

ungültige-email

Bitte geben Sie eine gültige E-Mail-Adresse ein.

Spezifikation

Eigenschaft	Wert
Padding	12px 16px
Border	1.5px solid #E4E4E7
Border-Radius	10px
Font-Size	14px
Focus-Border	#FF8500
Focus-Shadow	0 0 0 3px rgba(255, 133, 0, 0.12)

CSS

.input {
  padding: 12px 16px;
  border: 1.5px solid #E4E4E7;
  border-radius: 10px;
  font-size: 0.875rem;
  font-family: var(--font-body);
  background: white;
  color: #18181B;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.input:focus {
  border-color: #FF8500;
  box-shadow: 0 0 0 3px rgba(255, 133, 0, 0.12);
}

.input::placeholder {
  color: #A1A1AA;
}

Labels

.label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #52525B;
  margin-bottom: 6px;
  display: block;
}

Validierung

Status	Border-Farbe	Vorschau	Anwendung
Default	#E4E4E7		Standardzustand
Focus	#FF8500		Aktives Feld
Success	#22C55E		Valide Eingabe
Error	#EF4444		Fehlerhafte Eingabe

Fehlermeldungen

Fehlermeldungen werden unterhalb des Feldes in Error-Rot (#EF4444) mit 12px Schriftgröße angezeigt.