Как создать триггер-переключатель для checkbox в Tilda

1

Создали блок BF402N

2

Создали в нём поле "Вопрос с вариантами ответа" с настройкой "Несколько вариантов ответа (галочки)"

3

Добавили стиль на страницу в блок Другое - Т123

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Создаём триггер-переключатель вместо галочки checkbox в форме в Tilda.
Длительность видео: 16 минут

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека для примера


<style>
/*Фоновый трек*/
.t700 .t-checkbox__indicator {
    height: 26px;
    width: 52px;
    background-color: #f0f0f0;
    box-shadow: 0px 0px 4px 0px rgba(201,201,201,1);
    border-radius: 13px;
    cursor: pointer;
    opacity: 0.6;
    border-width: 0;
    margin-right: 15px;
}
/*Шар*/
.t700 .t-checkbox__indicator::before {
    content: "";
    height: 26px;
    width: 26px;
    box-shadow: inset 0px 0 13px 0px #7d7d7d;
    position: absolute;
    border-radius: 13px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}
/*Смещение шара*/
.t700 .t-checkbox__control .t-checkbox:checked~.t-checkbox__indicator:before {
    margin-left: 28px;
    box-shadow: inset 0px 0 17px 0px #ff3900;
}
.t700 .t-checkbox__indicator:after {opacity: 0;}
.t700 .t-text_xs { font-size: 16px;}
</style>