[ Narzędzia online ]
Generator Toggle
Switch CSS
Darmowe narzędzie do projektowania stron internetowych — twórz animowane przełączniki CSS toggle switch. Konfiguruj kolory, kształt, etykiety, animacje i eksportuj gotowy kod HTML + CSS + JS.
<!-- Toggle Switch -->
<div class="toggle-wrapper">
<label class="toggle-switch">
<input
type="checkbox"
id="myToggle"
name="myToggle"
class="toggle-input"
role="switch"
aria-checked="false"
aria-label="Przełącznik"
/>
<span class="toggle-track">
<span class="toggle-knob"></span>
</span>
</label>
</div>
<!-- Disabled example -->
<div class="toggle-wrapper">
<label class="toggle-switch">
<input type="checkbox" class="toggle-input" disabled />
<span class="toggle-track">
<span class="toggle-knob"></span>
</span>
</label>
</div>[ Przewodnik ]
Jakużywać
ToggleSwitch
Zasady projektowania stron internetowych z przełącznikami — od dostępności po animacje.
Dostępność (ARIA)
Toggle switch musi posiadać role="switch", aria-checked oraz widoczny focus ring. Przy projektowaniu stron internetowych dostępność jest wymogiem WCAG 2.1.
Rozmiary i proporcje
Optymalna szerokość toggle: 48-64px. Wysokość: ~56% szerokości. Knob powinien mieć 3px margines od krawędzi tracka dla estetyki i czytelności.
Stany kolorów
Track OFF: neutralny (szary). Track ON: akcent marki. Knob zazwyczaj biały. Kontrast min. 3:1 między knobem a trackiem. Disabled: opacity 0.45.
Dotyk mobilny
Minimalny obszar dotyku 44×44px (WCAG 2.5.5). Otaczający element label może być większy niż widoczny toggle. Kluczowe przy tworzeniu stron na mobile.
Integracja z formularzem
Toggle bazuje na input[type="checkbox"] z name i value. FormData automatycznie zbiera wartość. Przy React użyj onChange + useState lub react-hook-form.
Animacja i UX
Czas przejścia 200-300ms jest optymalny. Spring bounce (cubic-bezier z wartościami >1) dodaje fizyczność. Unikaj animacji >500ms — spowalnia interakcję.
[ Wiedza ]
CSS Toggle Switch w projektowaniu stron
Toggle switch (przełącznik) to jeden z najczęściej używanych elementów UI przy projektowaniu stron internetowych. Zastępuje klasyczny checkbox w sytuacjach, gdzie użytkownik włącza lub wyłącza opcję z natychmiastowym efektem — bez potrzeby klikania "Zapisz". Przykłady: tryb ciemny, powiadomienia, ustawienia prywatności.
Przy tworzeniu stron internetowych toggle switch implementuje się najczęściej jako element input[type="checkbox"] ukryty wizualnie (nie display:none, bo to psuje dostępność!) i powiązaną label z elementami track i knob. Przełączenie stanu przez CSS realizuje selektor input:checked ~ .track.
Kluczem do dostępnych stron internetowych jest dodanie role="switch" i aria-checked na kontrolce. Czytniki ekranu (NVDA, VoiceOver) ogłaszają stan jako "włączony"/"wyłączony". Focus ring (widoczny outline przy nawigacji klawiaturą) jest wymagany przez WCAG 2.1 — nigdy nie usuwaj go bez zapewnienia alternatywy.
Animacja knoba powinna trwać 200–300ms. Efekt spring (cubic-bezier z wartościami ponad 1.0) daje wrażenie fizycznej sprężystości — popularny w iOS i nowoczesnym projektowaniu stron. Zbyt długa animacja (>500ms) frustruje użytkownika, zbyt krótka (<100ms) gubi poczucie responsywności.
[ FAQ ]
Najczęstsze
Pytania
Odpowiedzi na pytania o toggle switch, CSS i tworzenie stron internetowych.
[ Studio Kalmus ]
Potrzebujesz profesjonalnej strony internetowej?
Nasze narzędzie to tylko przedsmak tego, co robimy. Studio Kalmus tworzy zaawansowane strony internetowe w Piasecznie i całej Polsce — z animacjami, dostępnością i SEO.