Eingabefelder

Latching square toggle

Latching square toggle: Eine kompakte, quadratische Symbolschaltfläche, die zwischen einem schwach umrissenen Aus-Zustand und einem durchgehenden, mit Akzenten gefüllten, gedrückten Zustand wechselt.

Tap to keep this release

Each square latches on its own, in three sizes

Latching square toggle verwenden

Latching square 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.

Einstellung	Typ	Standardwert	Vorschaugrenzen
`pressed`	`boolean`	`false`	Keine weitere Grenze in den Metadaten.
`size`	`select`	`md`	Optionen: sm, md, lg
`disabled`	`boolean`	`false`	Keine weitere Grenze in den Metadaten.
`accentColor`	`color`	`#9BE15D`	Keine weitere Grenze in den Metadaten.

Für welche Frameworks ist Latching square toggle verfügbar?

Latching square 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 Latching square toggle?

Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: clsx.

Welche Details zur Barrierefreiheit sind in Latching square toggle erkennbar?

Der React-Quellcode von Latching square toggle enthält: native Elemente (button); Attribute und Ereignisbehandler (aria-hidden, aria-pressed). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Latching square toggle reduzierte Bewegung?

Die Quellcode-Analyse fand in der index.tsx von Latching square toggle keine direkte Abfrage über useReducedMotion() oder matchMedia. 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 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 Check draw toggle von Fieldbook aus der Kategorie Eingabefelder.

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

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 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.

Standbild der UI-Komponente Spring layout toggle von Fieldbook aus der Kategorie Eingabefelder.

2781Spring layout toggleEingabefelderEin Schalter, dessen Knopf allein aufgrund der Anordnung an einem Ende der Schiene ausgerichtet ist und bei jedem Zustandswechsel zwischen den beiden gemessenen Positionen springt.

Standbild der UI-Komponente Labeled toggle row von Fieldbook aus der Kategorie Eingabefelder.

2798Labeled toggle rowEingabefelderEin kleiner Ein-/Ausschalter, gepaart mit einer eigenen Textbeschriftung, in der Größe einer Einstellungslistenzeile.