Генератор toggle switch (переключатель вкл/выкл) CSS
Настройте размер и цвета и проверьте предпросмотр. В коде используется настоящий чекбокс, поэтому он работает в формах и с клавиатурой.
Как пользоватьсяПереключатель вкл/выкл без JavaScript
Доступно на: 
Генератор toggle switch (переключатель вкл/выкл) CSS: для чего нужен
Переключатель вкл/выкл используется в настройках, формах регистрации и параметрах. Этот генератор делает переключатель из настоящего чекбокса, оформленного через CSS, без JavaScript: он хранит состояние, работает с клавиатурой и касанием, отправляется вместе с формой и озвучивается программой чтения с экрана как включённый или выключенный благодаря role=switch.
Вы настраиваете ширину, высоту, скругления и цвета и проверяете результат во включённом, выключенном и отключённом состоянии. В код входят видимый фокус, плавный переход, учитывающий тех, кто предпочитает меньше движения, и режим высокой контрастности.
Как пользоваться
- Настройте размер и скругления.
- Выберите цвета и текст подписи.
- Скопируйте HTML и CSS.
Когда использовать
- Настройки уведомлений.
- Тёмный режим сайта.
- Согласие с условиями в форме.
Частые вопросы
Нужен ли JavaScript?
Для работы — нет. Только если нужно что-то делать в момент переключения, например сохранять настройку: тогда достаточно слушать событие change у input.
Какой размер выбрать для телефона?
По WCAG 2.2 область касания должна быть не менее 24 на 24 px, а для пальца рекомендуется около 44 px. Поскольку текст рядом тоже входит в label, он увеличивает кликабельную область.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.