Компонент Checkboxes

Компонент Checkboxes представляет собой набор кастомных элементов управления, таких как радио-кнопки, чекбоксы, переключатели (toggle) и чекбоксы с галочкой. Он используется для предоставления пользователю возможности выбора одного или нескольких вариантов из предложенных. Компонент поддерживает различные состояния (активное, неактивное, выбранное, наведение) и стилизуется с помощью CSS.

Назначение компонента

Компонент Checkboxes используется для:

  • Выбора одного варианта из нескольких (радио-кнопки).
  • Выбора нескольких вариантов (чекбоксы).
  • Включения/отключения опций (переключатели).
  • Отображения выбранных состояний с помощью галочки или черточки.

Классы и их назначение

Основные классы

  • .sf-checkbox:
    • Базовый класс для всех типов чекбоксов.
    • Определяет общие стили, такие как display: inline-flex, выравнивание элементов и отступы.
    • Управляет состоянием курсора (cursor: pointer).
  • .sf-checkbox-radio:
    • Класс для радио-кнопок.
    • Использует псевдоэлемент ::after для отображения круга внутри радио-кнопки.
  • .sf-checkbox-confirm:
    • Класс для чекбоксов с галочкой.
    • Использует псевдоэлемент ::after для отображения галочки.
  • .sf-checkbox-toggle:
    • Класс для переключателей (toggle).
    • Использует псевдоэлемент ::before для отображения круглого переключателя.
  • .sf-checkbox-dash:
    • Класс для чекбоксов с черточкой.
    • Использует псевдоэлемент ::after для отображения черточки.
  • .sf-checkbox--1/2:
    • Модификатор для уменьшения размера чекбоксов и текста.
    • Применяется к радио-кнопкам, чекбоксам, переключателям и чекбоксам с черточкой.
  • .sf-checkbox--text:
    • Контейнер для текста (заголовок и описание).
    • Использует flex-direction: column для вертикального расположения текста.
  • .sf-checkbox--header:
    • Класс для заголовка чекбокса.
    • Определяет стили шрифта и жирность текста.

Состояния компонента

  • По умолчанию:
    • Чекбоксы и радио-кнопки отображаются в невыбранном состоянии.
    • Переключатели находятся в выключенном состоянии.
    • Цвета и границы соответствуют стилям по умолчанию.
  • Выбранное состояние:
    • Для радио-кнопок и чекбоксов меняется цвет фона и отображается индикатор (круг, галочка или черточка).
    • Для переключателей меняется цвет фона и положение круглого индикатора.
  • Наведение (hover):
    • При наведении на чекбокс или радио-кнопку появляется тень, чтобы указать, что элемент интерактивный.
  • Отключенное состояние (disabled):
    • Элементы становятся полупрозрачными, и курсор меняется на not-allowed.
    • Цвета границ и текста меняются на более бледные.

HTML-разметка компонента

Радио-кнопки

            <label class="sf-checkbox sf-checkbox-radio">
    <input type="radio" name="test">
    <div class="sf-checkbox-radio--background"></div>
    <div class="sf-checkbox--text">
        <span class="sf-checkbox--header">Label <i class="sf-icon">help</i></span>
        <span>Description</span>
    </div>
</label>

Чекбоксы с галочкой

<label class="sf-checkbox sf-checkbox-confirm">
    <input type="checkbox">
    <span class="sf-checkbox-confirm--background"></span>
    <div class="sf-checkbox--text">
        <span class="sf-checkbox--header">Label <i class="sf-icon">help</i></span>
        <span>Description</span>
    </div>
</label>

Переключатели (toggle)

<label class="sf-checkbox sf-checkbox-toggle">
    <input class="checkbox" type="checkbox">
    <span class="sf-checkbox-toggle--background"></span>
    <div class="sf-checkbox--text">
        <span class="sf-checkbox--header">Label <i class="sf-icon">help</i></span>
        <span>Description</span>
    </div>
</label>

Чекбоксы с черточкой

<label class="sf-checkbox sf-checkbox-dash">
    <input type="checkbox" checked="checked">
    <span class="sf-checkbox-dash--background"></span>
    <div class="sf-checkbox--text">
        <span class="sf-checkbox--header">Label <i class="sf-icon">help</i></span>
        <span>Description</span>
    </div>
</label>

Пример использования

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