Флажки и Радиокнопки

checkbox-radio
sm
md
lg
xl

В SIMAI Framework с помощью модификаторов можно костомизировать элементы форм

Описание

Создавайте согласованные кросс-браузерные и кросс-платформенные флажки и радио с помощью нашего полностью переписанного компонента проверок.

Чекбоксы

<div class="flex items-cross-center">
    <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-blue checked:b-blue checked:bg-check indeterminate:bg-dash indeterminate:b-blue indeterminate:bg-blue" type="checkbox" id="flexCheckDefault">
    <label class="inline-block m-left-1/3" for="flexCheckDefault">
        Флажок по умолчанию
    </label>
</div>
<div class="flex items-cross-center">
    <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-blue checked:b-blue checked:bg-check indeterminate:bg-dash indeterminate:b-blue indeterminate:bg-blue" type="checkbox" id="flexCheckChecked" checked>
    <label class="inline-block m-left-1/3" for="flexCheckChecked">
        Установленный флажок
    </label>
</div>

Неопределенный

Флажки могут быть использовать псевдокласс :indeterminate при ручной установке с помощью JavaScript

<div class="flex items-cross-center">
    <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-blue checked:b-blue checked:bg-check indeterminate:bg-dash indeterminate:b-blue indeterminate:bg-blue" type="checkbox" value="" id="flexCheckIndeterminate">
    <label class="inline-block m-left-1/3" for="flexCheckIndeterminate">
        Неопределенный флажок
    </label>
</div>

Отключено

Добавьте атрибут disabled, и для связанных тегов label будет автоматически применен стиль, соответствующий более светлому цвету, чтобы помочь обозначить состояние ввода.

<div class="flex items-cross-center">
    <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-blue checked:b-blue checked:bg-check indeterminate:bg-dash indeterminate:b-blue indeterminate:bg-blue disabled:opacity-5 disabled:pointer-event-none" type="checkbox" value="" id="flexCheckDisabled" disabled>
    <label class="inline-block m-left-1/3 opacity-5" for="flexCheckDisabled">
        Выключенный флажок
    </label>
</div>
<div class="flex items-cross-center">
    <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-blue checked:b-blue checked:bg-check indeterminate:bg-dash indeterminate:b-blue indeterminate:bg-blue disabled:opacity-5 disabled:pointer-event-none" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
    <label class="inline-block m-left-1/3 opacity-5" for="flexCheckCheckedDisabled">
        Выключенный выбранный флажок
    </label>
</div>

Радиокнопки

<div class="flex items-cross-center">
    <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-blue checked:b-blue checked:bg-circle radius-full" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
    <label class="inline-block m-left-1/3" for="flexRadioDefault1">
        Радиокнопка по умолчанию
    </label>
</div>
<div class="flex items-cross-center">
    <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-blue checked:b-blue checked:bg-circle radius-full" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
    <label class="inline-block m-left-1/3" for="flexRadioDefault2">
        Выбранная радиокнопка
    </label>
</div>

Отключено

Добавьте атрибут disabled, и для связанных тегов label будет автоматически применен стиль, соответствующий более светлому цвету, чтобы помочь обозначить состояние ввода.

<div class="flex items-cross-center">
    <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-blue checked:b-blue checked:bg-circle radius-full disabled:opacity-5 disabled:pointer-event-none" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
    <label class="inline-block m-left-1/3 opacity-5" for="flexRadioDisabled">
        Выключенная радиокнопка
    </label>
</div>
<div class="flex items-cross-center">
    <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-blue checked:b-blue checked:bg-circle radius-full disabled:opacity-5 disabled:pointer-event-none" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
    <label class="inline-block m-left-1/3 opacity-5" for="flexRadioCheckedDisabled">
        Выключенная выбранная радиокнопка
    </label>
</div>

Переключатели

Переключатель имеет разметку настраиваемого флажка, но использует класс .form-switch для визуализации переключателя. Они также поддерживают атрибут disabled.

<div class="flex items-cross-center">
    <input class="m-0 w-c6 h-b6 bg-circle checked:bg-circle radius-2 bg-contain bg-repeat-none bg-left checked:bg-blue checked:b-blue border-1 border-surface-lowest transition appearance-none t-inherit string-inherit checked:bg-right" type="checkbox" id="flexSwitchCheckDefault">
    <label class="inline-block m-left-1/3" for="flexSwitchCheckDefault">
        Переключатель по умолчанию
    </label>
</div>
<div class="flex items-cross-center">
    <input class="m-0 w-c6 h-b6 bg-circle checked:bg-circle radius-2 bg-contain bg-repeat-none bg-left checked:bg-blue checked:b-blue border-1 border-surface-lowest transition appearance-none t-inherit string-inherit checked:bg-right" type="checkbox" id="flexSwitchCheckChecked" checked="">
    <label class="inline-block m-left-1/3" for="flexSwitchCheckChecked">
        Выбранный переключатель
    </label>
</div>
<div class="flex items-cross-center">
    <input class="m-0 w-c6 h-b6 bg-circle checked:bg-circle radius-2 bg-contain bg-repeat-none bg-left checked:bg-blue checked:b-blue border-1 border-surface-lowest transition appearance-none t-inherit string-inherit checked:bg-right disabled:opacity-5 disabled:pointer-event-none" type="checkbox" id="flexSwitchCheckDisabled" disabled>
    <label class="inline-block m-left-1/3 opacity-5" for="flexSwitchCheckDisabled">
        Выключенный переключатель
    </label>
</div>
<div class="flex items-cross-center">
    <input class="m-0 w-c6 h-b6 bg-circle checked:bg-circle radius-2 bg-contain bg-repeat-none bg-left checked:bg-blue checked:b-blue border-1 border-surface-lowest transition appearance-none t-inherit string-inherit checked:bg-right disabled:opacity-5 disabled:pointer-event-none" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled>
    <label class="inline-block m-left-1/3 opacity-5" for="flexSwitchCheckCheckedDisabled">
        Выключенный выбранный переключатель
    </label>
</div>

Адаптивность

Для установки адаптивности элементов формы, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью