Toggle-Switch-Generator

Barrierefreien Schalter aus einer Checkbox gestalten: Größe, Farben, Knopf und Übergang einstellen – fertiges HTML und CSS.

Der Toggle-Switch-Generator macht aus einer normalen Checkbox einen Schalter. Du stellst Breite, Höhe, Abstand des Knopfs, Radius, Farben für an und aus sowie die Übergangszeit ein. Der Code nutzt role="switch", bleibt per Tastatur bedienbar und kommt ohne JavaScript und ohne zusätzliche Elemente aus.

Breite px

Höhe px

Abstand des Knopfs px

Eckenradius px

Farbe an

Farbe aus

Knopf

Übergang ms

Beschriftung

Schatten am Knopf

<label class="switch">
  <input type="checkbox" role="switch" checked>
  Benachrichtigungen
</label>

So funktioniert der Schalter

Die Checkbox erhält appearance: none und wird selbst zur Schiene. Der Knopf ist ein ::before-Pseudo-Element, das bei :checked per transform: translateX() nach rechts gleitet. Die Strecke berechnet der Generator aus Breite, Höhe und Abstand.

Schiene: Breite, Höhe, Radius und Farbe für „aus“.
Knopf: Größe = Höhe minus zweimal Abstand.
Zustand an: Schienenfarbe wechselt, Knopf verschiebt sich.

Passende Checkboxen und Radio-Buttons gestaltest du im Checkbox- und Radio-Generator, den Kontrast der Farben prüfst du im Farbkontrast-Prüfer.

Häufige Fragen

Warum ist der Schalter eine Checkbox?

Eine Checkbox bringt Fokus, Tastaturbedienung (Leertaste), Formularwert und Zustand mit. Mit appearance: none entfernst du nur das Aussehen. role="switch" sorgt dafür, dass Screenreader „Schalter, ein“ statt „Kontrollkästchen, aktiviert“ ansagen.

Wann nehme ich einen Schalter statt einer Checkbox?

Ein Schalter wirkt sofort, etwa beim Einschalten von Benachrichtigungen. Eine Checkbox passt, wenn die Auswahl erst mit einem Formular abgeschickt wird oder mehrere Optionen gewählt werden.

Funktioniert das in allen Browsern?

Ja. Pseudo-Elemente auf Checkboxen mit appearance: none werden von allen aktuellen Browsern unterstützt. Bei sehr alten Browsern erscheint einfach die normale Checkbox.

Wie groß sollte ein Schalter sein?

Für Touch-Bedienung sollte die klickbare Fläche mindestens 44 × 44 px groß sein. Da das Label mit klickbar ist, reicht ein kleinerer Schalter, solange der Text daneben steht.

Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.