.choice

Общий блок для чекбоксов и радиокнопок.

Сделано через стандартные инпуты.
Весь функционал с чеканьем/анчеканьем нативен.

У чекнутой радиокнопки нет наведения: оно бессмысленно.













.choice_disabled

Тут висит pointer-events: none - так проще сбрасывать эффекты наведения. Если вдруг получится так, что в задизейбленный чойз надо кликать - уберем.

Еще тут важно проставлять атрибут disabled самому .choice__input, чтобы на нем нельзя было сфокусироваться при табулировании.












Цветные чекбоксы

Чекбоксы этой группы модификаторов заливаются цветом всегда. И в чекнутом состоянии и в нечекнутом. Только для чекбокс.














Чекбоксы, которые радиокнопки

В рекламной канители есть такой кейс: http://prntscr.com/bf12m6 там нужно выбрать цвет чекбокса, причем только один. Получается, что внутри это радио-кнопки, которые снаружи выглядят как чекбоксы. Собсна используем .choice_widget_check, как если бы это были чекбоксы, а сам виджет просто делаем type="radio". Единственное - тут надо сбросить эффекты наведения (по радиокнопке бессмысленно кликать повторно). Для этого нужен модификатор .choice_radio-inside.


Кейс, когда выбираем позицию:









Кейс, когда выбираем цвета (за этим нам и понадобились цветовые модификаторы выше):











Чойзы без текста

Вообще можно просто удалить .choice__label и все будет работать, но для лучшей дотупности надо бы лейбл оставить и скрыть CSS-ом. Это обработает кейс отвалившегося CSS-а, например. Скрываем модификатором
.choice_hidden-label.