Zum Inhalt springen
Fieldbook
Menü
Anmelden
DE

Eingabefelder

Check draw toggle

Check draw toggle: Ein quadratisches Kontrollkästchen, dessen Häkchen sich beim Aktivieren Strich für Strich selbst zeichnet, mit sanftem Drücken und Hover-Skala.

Check draw toggle verwenden

Check draw toggle verwendet das Vorschauformat „Inline“ mit der Theme-Einstellung „hell/dunkel“.

Vorschau anpassen

Diese Einstellungen werden an die Demo übergeben. Standardwerte und Grenzen gelten für die Vorschau; die vollständige Props-API steht in der Implementierung.

EinstellungTypStandardwertVorschaugrenzen
checkedbooleanfalseKeine weitere Grenze in den Metadaten.
sizeselectmediumOptionen: small, medium, large
variantselectoutlineOptionen: outline, filled
accentColorcolor#38BDF8Keine weitere Grenze in den Metadaten.
Für welche Frameworks ist Check draw toggle verfügbar?

Check draw toggle ist für React, Vue, Svelte, Astro, HTML verfügbar. Die Live-Vorschau verwendet React; die folgenden Quellcode-Beobachtungen beziehen sich auf index.tsx. Prüfe die gewählte Portierung auf die benötigten Interaktionen.

Welche Abhängigkeiten hat Check draw toggle?

Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: motion, clsx, tailwind-merge.

Welche Details zur Barrierefreiheit sind in Check draw toggle erkennbar?

Der React-Quellcode von Check draw toggle enthält: Attribute und Ereignisbehandler (aria-checked, aria-disabled, aria-hidden); explizite Rollen (checkbox). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Check draw toggle reduzierte Bewegung?

Check draw toggle liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: delay: reduceMotion ? 0 : 0.1; delay: reduceMotion ? 0 : filled ? 0 : 0.1; duration: reduceMotion ? 0 : 0.06. Prüfe die vollständige Implementierung, gemeinsame Stile und die gewählte Portierung mit aktivierter Bewegungsreduktion; diese Beobachtungen belegen keinen vollständigen Animationsstopp.

Verbinde deinen Agenten

Verwandte offene Komponenten

Standbild der UI-Komponente Latching square toggle von Fieldbook aus der Kategorie Eingabefelder.
2808Latching square toggleEingabefelderEine kompakte, quadratische Symbolschaltfläche, die zwischen einem schwach umrissenen Aus-Zustand und einem durchgehenden, mit Akzenten gefüllten, gedrückten Zustand wechselt.
Standbild der UI-Komponente Settings Toggle Row von Fieldbook aus der Kategorie Eingabefelder.
2017Settings Toggle RowEingabefelderEine beschriftete Einstellungsreihe, die in einem Ein-Aus-Schalter endet, dessen Daumen sich beim Drücken ausdehnt und zurückspringt, wenn er zur Ruhe kommt.
Standbild der UI-Komponente Icon crossfade switch von Fieldbook aus der Kategorie Eingabefelder.
1980Icon crossfade switchEingabefelderEin Kippschalter, dessen Daumensymbol ausgeblendet und in ein anderes Symbol skaliert wird, wenn der Schalter zwischen Aus und Ein wechselt.
Standbild der UI-Komponente Select All Checklist von Fieldbook aus der Kategorie Eingabefelder.
1982Select All ChecklistEingabefelderEin übergeordnetes Kontrollkästchen, das einen Bindestrich anzeigt, wenn nur einige seiner untergeordneten Elemente aktiviert sind, und ein Häkchen, sobald alle Elemente aktiviert sind.
Standbild der UI-Komponente Multi select toggle row von Fieldbook aus der Kategorie Eingabefelder.
2002Multi select toggle rowEingabefelderEine Reihe unabhängiger Umschalttasten, wie Textformatierungsoptionen, bei denen eine beliebige Zahl gleichzeitig gedrückt bleiben kann.
Standbild der UI-Komponente Sliding Thumb Switch von Fieldbook aus der Kategorie Eingabefelder.
2433Sliding Thumb SwitchEingabefelderEin Ein-/Ausschalter, der aus einem versteckten Kontrollkästchen besteht: einer Pillenleiste, die sich neu einfärbt, und einem runden Daumen, der an die gegenüberliegende Kante gleitet.