Element · 6 Varianten
Feld
elements/Feld.astro
Label, Input, Textarea, Select, Helper, Error, Required. Fünf Zustände. Radius sm, Kante granit-300 / 700, Fokus-Ring Oliv, Error nur Punkt und Kante granit-800.
Notizen
- Bestand: kein Formular-Element. Fokus-Ring global vorhanden.
- Radien-Regel: Input darf sm. Error: kein Rot, Signal-Punkt granit-800 plus dunklere Kante.
- Required-Marker Oliv als Stern hinter dem Label. Helper und Error teilen den Platz unter dem Feld.
Props
| Name | Typ | Default | Notiz |
|---|---|---|---|
| variant | "default" | "focus" | "filled" | "error" | "disabled" | "arten" | "default" | 01–06. |
| surface | "nacht" | "paper" | "nacht" | Pflicht-Paar. |
<Feld variant="default" surface="nacht" />01 · Default
Leer, Placeholder
Anfrage. Label oben, Helper unten.
Nacht
Wir antworten innerhalb von 24 Stunden.
Paper
Wir antworten innerhalb von 24 Stunden.
02 · Focus
Ring Oliv
Bewegung Fokus. 2px, Offset 2.
Nacht
Wir antworten innerhalb von 24 Stunden.
Paper
Wir antworten innerhalb von 24 Stunden.
03 · Filled
Wert steht
Anfrage. Keine Farbänderung.
Nacht
Wir antworten innerhalb von 24 Stunden.
Paper
Wir antworten innerhalb von 24 Stunden.
04 · Error
Kante granit-800, Punkt, Satz
Signal. aria-invalid.
Nacht
Adresse braucht eine Domain.
Paper
Adresse braucht eine Domain.
05 · Disabled
opacity-50
Button disabled. Kein Cursor-Wechsel.
Nacht
Wir antworten innerhalb von 24 Stunden.
Paper
Wir antworten innerhalb von 24 Stunden.
06 · Arten
Textarea, Select
Anfrage. Gleiche Kante, gleicher Radius.
Nacht
Paper