Zustände

Jeder Zustand aller Formular-Controls auf einen Blick – von Button und Input über Checkbox, Select, Combobox und Slider bis zu Segmented und OTP. Die Matrix ist statisch: Hover, Aktiv und Fokus werden über data-force-state erzwungen, Deaktiviert, Ungültig und Aktiviert über die echten Props. Unterhalb der Matrix stehen bedienbare Beispiele.

Zustandsmatrix

Zuerst das aktuelle Theme, darunter derselbe Inhalt in einem .dark-Wrapper. Erst auf sehr breiten Viewports (ab 2xl) stehen beide nebeneinander.

Standard

Zustandsmatrix Standard: Zeilen sind Komponenten, Spalten sind Zustände.
Komponente	Standard	Hover	Aktiv	Fokus	Deaktiviert	Ungültig	Aktiviert
Button · Primary
Button · Secondary
Button · Outline
Button · Ghost
Button · Danger
Button · Link
Input
Switch
Textarea	Kurze Notiz	Kurze Notiz	Kurze Notiz	Kurze Notiz	Gesperrt	Fehlerhaft
Native Select
Checkbox	Aktiv	Aktiv	Aktiv	Aktiv	Aktiv		Aktiv
Radio	Präsenz	Präsenz	Präsenz	Präsenz	Präsenz		Präsenz
Select-Trigger
Combobox-Trigger
Slider
Toggle
Segmented
Input OTP	Einmalcode				Einmalcode	Einmalcode	Einmalcode

Dunkel

Zustandsmatrix Dunkel: Zeilen sind Komponenten, Spalten sind Zustände.
Komponente	Standard	Hover	Aktiv	Fokus	Deaktiviert	Ungültig	Aktiviert
Button · Primary
Button · Secondary
Button · Outline
Button · Ghost
Button · Danger
Button · Link
Input
Switch
Textarea	Kurze Notiz	Kurze Notiz	Kurze Notiz	Kurze Notiz	Gesperrt	Fehlerhaft
Native Select
Checkbox	Aktiv	Aktiv	Aktiv	Aktiv	Aktiv		Aktiv
Radio	Präsenz	Präsenz	Präsenz	Präsenz	Präsenz		Präsenz
Select-Trigger
Combobox-Trigger
Slider
Toggle
Segmented
Input OTP	Einmalcode				Einmalcode	Einmalcode	Einmalcode

Interaktiv

Diese drei Controls sind echt bedienbar und liegen als einzige auf der Seite in der Tab-Reihenfolge.

Klicks: 0