Чекбокс в виде переключателя: скрыть нативный input и стилизовать label с псевдоэлементом бегунка

Разбор задачи

Нативный input типа checkbox остаётся в дереве документа, визуал перенесён на соседний label. Так состояние «вкл» читают скрипты форм Битрикс без кастомного hidden поля.

.neo-switch {
  appearance: none; width: 0; height: 0; position: absolute; opacity: 0;
 }

.neo-switch + label {
    position: relative; display: inline-block; width: 44px; height: 26px;
    background: #94a3b8; border-radius: 999px; cursor: pointer;
 }

.neo-switch:checked + label { background: #22c55e; }
.neo-switch:checked + label::after { translate: 18px 0; }
.neo-switch:focus-visible + label { outline: 2px solid #38bdf8; outline-offset: 2px; }
.neo-switch + label::after { content: ''; position:absolute; inset: 3px auto 3px 3px;
 width:20px;height:20px;border-radius:50%;background:#fff;transition:translate .18s ease; }

В списках настроек модуля прокладывайте name из шаблона компонента, чтобы POST совпадал с ожидаемым PHP обработчиком.

Замечания перед выкладкой

Вносите правки только через среду с бэкапом и понятным diff. Если сниппет идёт в шаблон на Битрикс, проверьте конфликт с уже подключённым jQuery/UI и включите «отложенный» запуск там, где длинный главный файл может обрезать DOMContentLoaded.