Генератор CSS-перемикачів

Налаштуйте параметри, щоб створити тогл-перемикач, клацніть на живому попередньому перегляді, щоб побачити анімацію, а потім скопіюйте готові до використання HTML і CSS. Задайте ширину, висоту, кольори доріжки у вимкненому/увімкненому стані, колір повзунка, заокруглення кутів і швидкість переходу — результат є стандартним доступним тогл-перемикачем на основі чекбокса, а не просто декоративною формою.

Що це за інструмент?

CSS тогл-перемикач — це чекбокс, стилізований так, щоб виглядати і поводитися як фізичний перемикач увімкнено/вимкнено — доріжка у формі пігулки з круглим повзунком, що ковзає з одного боку на інший. Під капотом це все ще справжній елемент введення checkbox, і це важливо: це зберігає елемент керування доступним із клавіатури та придатним для скрінрідерів і надсилання форм, на відміну від перемикача, побудованого суто з клікабельних div.

Цей інструмент будує цей патерн за вас: прихований чекбокс, доріжка, що змінює колір залежно від :checked, і повзунок, що ковзає за допомогою CSS-трансформації. Налаштуйте повзунки й вибір кольору, клацніть на попередньому перегляді, щоб перевірити реальну анімацію перемикання, і скопіюйте як CSS, так і мінімальну HTML-розмітку, від якої він залежить.

Джерело: WAI-ARIA Authoring Practices, W3C — рекомендує справжній елемент введення checkbox як доступну основу для елемента-перемикача, тому результат цього генератора зберігає базовий елемент введення.

Навіщо його використовувати?

Попередній перегляд — це справжній, клікабельний перемикач, а не статичне зображення, тож ви можете перевірити точну анімацію перед використанням.
Видає одразу CSS і доступну HTML-структуру (елемент введення checkbox + label), від яких залежить CSS.
Повний контроль над шириною/висотою доріжки, кольором у вимкненому стані, кольором у увімкненому стані, кольором повзунка, заокругленням кутів і швидкістю переходу.
Використовує стандартний патерн checkbox + селектор :checked, тому перемикач залишається доступним із клавіатури та працює в реальних формах.
Працює повністю у вашому браузері — нічого з того, що ви налаштовуєте, нікуди не завантажується.
Безкоштовно, без реєстрації, працює на мобільних пристроях.

Як користуватися

Задайте ширину й висоту, щоб визначити розмір доріжки — повзунок автоматично підганяється всередину з невеликим відступом.
Виберіть колір доріжки у вимкненому стані для вигляду за замовчуванням (без позначки) і колір у увімкненому стані для стану, коли перемикач активовано.
Виберіть колір повзунка — білий або світлий нейтральний зазвичай дає найсильніший контраст із доріжкою.
Встановіть радіус кута на 50% для класичного перемикача у формі пігулки або зменшіть його для трохи заокругленого прямокутника.
Налаштуйте швидкість переходу, щоб контролювати, наскільки швидко ковзає повзунок і змінюється колір доріжки між станами.
Клацніть на тогл-перемикачі в попередньому перегляді, щоб переконатися, що анімація виглядає правильно, а потім скопіюйте CSS і HTML у свій проєкт.

Приклад

Введення

Width: 52px · Height: 28px · Off color: #cbd5e1 · On color: #ea580c · Radius: 50% · Speed: 200ms

Результат

.switch input:checked ~ .track { background-color: #ea580c; }
.switch input:checked ~ .track .thumb { transform: translateX(24px); }

Ядро патерну: стан :checked чекбокса в поєднанні з селектором сусідніх елементів (~) керує і кольором фону доріжки, і відстанню ковзання повзунка.

Чому чекбокс, а не div з обробником кліку

Виникає спокуса зробити перемикач із двох елементів <div> і невеликого коду JavaScript, що змінює клас при кліку, але такий підхід зазвичай ламає навігацію з клавіатури, оголошення для скрінрідерів та надсилання форм — справжній чекбокс безкоштовно вирішує всі три проблеми. Патерн, який генерує цей інструмент, зберігає <input type="checkbox"> як реальний інтерактивний елемент (візуально прихований, але все ще доступний для фокусу) і використовує чистий CSS — без жодного JavaScript — для стилізації доріжки та повзунка на основі рідного стану :checked чекбокса.

Типові стилі перемикачів

Класичний перемикач-пігулка: радіус кута 50%, помірний розмір (48-56px шириною), чітка зміна кольору між увімкненим і вимкненим станами.
Перемикач для панелі налаштувань: менший розмір (36-44px шириною), приглушений колір у вимкненому стані (світло-сірий) на тлі бренд-кольору у увімкненому стані.
Трохи заокруглений перемикач: радіус кута приблизно 20-30% замість повної пігулки, для більш прямокутного вигляду в стилі застосунку.
Швидкий, різкий перемикач: швидкість переходу 100-150 мс відчувається миттєвою і чуйною.
Повільний, виважений перемикач: швидкість переходу 300-400 мс сприймається плавнішою та вишуканішою, корисно для одного важливого перемикача налаштувань.

Поєднання з іншими CSS-інструментами

Згенеровані доріжка та повзунок уже використовують border-radius під капотом, тож якщо потрібен квадратний або по-іншому заокруглений варіант поза межами того, що пропонує повзунок, Генератор Border Radius дозволяє точно налаштувати кожен кут окремо перед вставкою значення. Генератор Box Shadow корисний для додавання тонкої тіні до повзунка для додаткової глибини.

→ Генератор border-radius · Генератор box-shadow

Часті запитання

Чому результат включає HTML, а не лише CSS?

Тогл-перемикач — не суто візуальний елемент: він залежить від справжнього <input type="checkbox">, обгорнутого в <label>, плюс елементів доріжки та повзунка, на які націлений CSS. Без цієї точної структури селектори на основі :checked у згенерованому CSS не матимуть до чого прикріпитися, тому обидві частини копіюються разом.

Чи доступний цей перемикач?

Так — оскільки інтерактивний елемент є справжнім чекбоксом (лише візуально прихованим за допомогою техніки, що зберігає його в дереві доступності, а не display:none), він залишається доступним для фокусу через Tab, перемикається за допомогою Space чи Enter і коректно оголошується скрінрідерами як чекбокс у його поточному стані позначено/не позначено.

Чи можу я використовувати це всередині реальної HTML-форми?

Так. Оскільки базовий елемент — стандартний елемент введення checkbox, ви можете надати йому атрибути name і value, і він надсилатиметься як будь-який інший чекбокс — позначені перемикачі надсилають своє значення, непозначені пропускаються, точно як звичайний чекбокс.

Чому повзунок рухається за допомогою transform, а не зміною позиції left?

Анімація transform: translateX() обробляється композитором браузера і залишається плавною навіть на слабших пристроях, тоді як анімація left запускає перерахунок макета на кожному кадрі. Згенерований CSS завжди використовує transform для руху ковзання саме з цієї причини.

Що саме контролює повзунок радіуса кута?

Він масштабує заокруглення кутів і доріжки, і повзунка разом, пропорційно до висоти доріжки. При 50% ви отримуєте повністю заокруглену пігулку з круглим повзунком; менші значення зберігають форму більш прямокутною для квадратнішого перемикача в стилі застосунку.