Formulare
Formulare
Jedes Feld hat ein Label. Fehler werden nicht nur farblich, sondern mit Icon und Text ausgewiesen. Zustände: Ruhe, Fokus (Ring), deaktiviert, Fehler.
Max. 70 Zeichen (QR-Limit).
CHF/Mt.
Kit-Darstellung; das native
<select> bleibt verborgener Wertträger (name/value).
Auswahlfeld (px-select) — Zustände
Land ist erforderlich.
Tippen springt zum Eintrag; Pos1/Ende, Pfeiltasten, Enter wählt, Esc schliesst.
Zweispaltiges Raster (px-form-grid)
Checkbox, Radio, Switch & Dropdown
Radio-Gruppe (px-radio · Ui::radio())
Automatische Freigabe
Nur unveränderte Positionen.
Deaktiviert
Dropdown (präsentativ)
Keine Einträge
Native-freie Eingaben — Datum, Zeit, Datei, Schieber, Stepper
Sichtbar ist stets eine Kit-Darstellung; das native Element (Kalender, Zeitrad, Datei-Dialog, Range, Zahlenfeld) bleibt verborgener Wertträger für name/value. Ohne JavaScript greift die native Fallback-Bedienung.
Kit-Liste (30-Min-Schritte); Tippen springt zur Uhrzeit.
Keine Datei gewählt
20%
Karten & Kennzahlen
Generische Oberflächen-Karte (.px-card, optional --link mit Hover) im Kartenraster (.px-cards) und Kennzahl-Kachel (.px-stat) — für Detailpanels und Dashboards.
Pro Domain
AlleRandlos (--flush)
Karte ohne Innenabstand für eigene Inhalte (z.B. eine Liste bis an die Kante).
Randlos mit gepolstertem Body (--flush > .px-card__body)
.px-card__body ist der semantische Inhalts-Wrapper; in einer normalen Karte ohne eigenes Padding, in einer randlosen Karte polstert er den Inhalt selbst.
Randlose Karte, deren Body eigenes Padding trägt — nützlich, wenn direkt darüber/darunter noch randlose Elemente sitzen.