Флажок

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

Пример

Получать обновленияТолько важные новости продукта

HTML

<label class="sf-checkbox sf-checkbox--size-1 flex">
  <span class="sf-checkbox-box transition flex"><input name="updates" type="checkbox"><span class="sf-icon" aria-hidden="true"></span></span>
  <span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-top flex"><span class="sf-checkbox-label">Получать обновления</span></span><span class="sf-checkbox-description">Только важные новости продукта</span></span>
</label>

Разметка

Минимальную разметку показывает пример выше. Части вложены так: label.sf-checkbox → sf-checkbox-box с <input type="checkbox"> и sf-icon → sf-checkbox-container с подписью.

Оболочка — <label class="sf-checkbox">: она даёт доступное имя и кликабельную область. Скрипт компонента находит флажки по label.sf-checkbox.
Нативный <input type="checkbox"> — источник name, value, checked, disabled, фокуса и отправки формы. Он лежит прямым потомком sf-checkbox-box: CSS скрывает только такой input, в другом месте он остаётся видимым браузерным флажком.
sf-icon после input рисует отметку: скрипт пишет в него check для отмеченного и remove для смешанного состояния. Без него индикатор пуст.
Текст — в sf-checkbox-container: подпись sf-checkbox-label внутри sf-checkbox-top или прямо в контейнере, пояснение — sf-checkbox-description.

Варианты

Размер

Три ступени — sf-checkbox--size-1/2, sf-checkbox--size-1 и sf-checkbox--size-2, как у полей форм, радиокнопки и переключателя. Размер меняет индикатор, подпись и пояснение вместе. Берите ступень полей и кнопок той же формы; в списке флажок берёт размер списка.

sf-checkbox--size-1/2 Отмеченный НеотмеченныйПояснение под подписью

sf-checkbox--size-1 Отмеченный НеотмеченныйПояснение под подписью

sf-checkbox--size-2 Отмеченный НеотмеченныйПояснение под подписью

HTML

<div class="flex flex-wrap gap-4">
  <div class="flex flex-col gap-2">
    <code class="text-1/2 color-on-surface-variant">sf-checkbox--size-1/2</code>
    <label class="sf-checkbox sf-checkbox--size-1/2 flex"><span class="sf-checkbox-box transition flex"><input type="checkbox" checked><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Отмеченный</span></span></label>
    <label class="sf-checkbox sf-checkbox--size-1/2 flex"><span class="sf-checkbox-box transition flex"><input type="checkbox"><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Неотмеченный</span><span class="sf-checkbox-description">Пояснение под подписью</span></span></label>
  </div>
  <div class="flex flex-col gap-2">
    <code class="text-1/2 color-on-surface-variant">sf-checkbox--size-1</code>
    <label class="sf-checkbox sf-checkbox--size-1 flex"><span class="sf-checkbox-box transition flex"><input type="checkbox" checked><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Отмеченный</span></span></label>
    <label class="sf-checkbox sf-checkbox--size-1 flex"><span class="sf-checkbox-box transition flex"><input type="checkbox"><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Неотмеченный</span><span class="sf-checkbox-description">Пояснение под подписью</span></span></label>
  </div>
  <div class="flex flex-col gap-2">
    <code class="text-1/2 color-on-surface-variant">sf-checkbox--size-2</code>
    <label class="sf-checkbox sf-checkbox--size-2 flex"><span class="sf-checkbox-box transition flex"><input type="checkbox" checked><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Отмеченный</span></span></label>
    <label class="sf-checkbox sf-checkbox--size-2 flex"><span class="sf-checkbox-box transition flex"><input type="checkbox"><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Неотмеченный</span><span class="sf-checkbox-description">Пояснение под подписью</span></span></label>
  </div>
</div>

Состав

Подпись обязательна: она даёт флажку доступное имя. Пояснение добавляет sf-checkbox-description, значок подсказки — sf-icon в sf-checkbox-top рядом с подписью; размер значка следует за размером флажка. Скрипт компонента пояснение с input не связывает: дайте пояснению id и напишите на input aria-describedby с этим id сами.

Только подпись sf-checkbox-label в контейнере

ПодписьПояснение под подписью sf-checkbox-top + sf-checkbox-description

Подпись с подсказкой sf-icon в sf-checkbox-top

HTML

<div class="flex flex-wrap gap-4">
  <div class="flex flex-col gap-1">
    <label class="sf-checkbox sf-checkbox--size-1 flex"><span class="sf-checkbox-box transition flex"><input type="checkbox"><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Только подпись</span></span></label>
    <code class="text-1/2 color-on-surface-variant">sf-checkbox-label в контейнере</code>
  </div>
  <div class="flex flex-col gap-1">
    <label class="sf-checkbox sf-checkbox--size-1 flex"><span class="sf-checkbox-box transition flex"><input type="checkbox"><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-top flex"><span class="sf-checkbox-label">Подпись</span></span><span class="sf-checkbox-description">Пояснение под подписью</span></span></label>
    <code class="text-1/2 color-on-surface-variant">sf-checkbox-top + sf-checkbox-description</code>
  </div>
  <div class="flex flex-col gap-1">
    <label class="sf-checkbox sf-checkbox--size-1 flex"><span class="sf-checkbox-box transition flex"><input type="checkbox"><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-top flex"><span class="sf-checkbox-label">Подпись с подсказкой</span><i class="sf-icon" aria-hidden="true">help</i></span></span></label>
    <code class="text-1/2 color-on-surface-variant">sf-icon в sf-checkbox-top</code>
  </div>
</div>

Положение индикатора

Положение индикатора задаёт порядок двух частей внутри <label>. В начале строки индикатор подходит обычным формам; в конце — строкам настроек, где такая композиция едина для всего интерфейса.

Индикатор в логическом начале Индикатор в логическом конце

HTML

<div class="flex flex-col gap-2">
  <label class="sf-checkbox sf-checkbox--size-1 flex"><span class="sf-checkbox-box transition flex"><input name="start-position" type="checkbox" checked><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Индикатор в логическом начале</span></span></label>
  <label class="sf-checkbox sf-checkbox--size-1 flex content-main-between"><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Индикатор в логическом конце</span></span><span class="sf-checkbox-box transition flex"><input name="end-position" type="checkbox"><span class="sf-icon" aria-hidden="true"></span></span></label>
</div>

Состояния

Все состояния задаёт нативный input; класс на оболочке нужен только ошибке. Наведение и нажатие компонент показывает сам.

Отмечен

Нативный checked заливает индикатор основным цветом и ставит отметку.

HTML

<div class="flex flex-wrap gap-4">
  <div class="flex flex-col gap-1">
    <label class="sf-checkbox sf-checkbox--size-1 flex"><span class="sf-checkbox-box transition flex"><input type="checkbox"><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Получать новости</span></span></label>
    <code class="text-1/2 color-on-surface-variant">без checked</code>
  </div>
  <div class="flex flex-col gap-1">
    <label class="sf-checkbox sf-checkbox--size-1 flex"><span class="sf-checkbox-box transition flex"><input type="checkbox" checked><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Получать новости</span></span></label>
    <code class="text-1/2 color-on-surface-variant">checked</code>
  </div>
</div>

Смешанное

Смешанное состояние означает, что выбрана часть дочерних вариантов: индикатор показывает черту вместо отметки. HTML-атрибута с таким поведением нет, и третьего отправляемого значения оно не создаёт. Его задаёт свойство input.indeterminate = true или атрибут data-indeterminate, который скрипт компонента переносит в свойство один раз при подключении; дальше меняйте состояние через JavaScript.

HTML

<div class="flex flex-wrap gap-4">
  <div class="flex flex-col gap-1">
    <label class="sf-checkbox sf-checkbox--size-1 flex"><span class="sf-checkbox-box transition flex"><input type="checkbox" data-indeterminate><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Выбрана часть разделов</span></span></label>
    <code class="text-1/2 color-on-surface-variant">data-indeterminate</code>
  </div>
  <div class="flex flex-col gap-1">
    <label class="sf-checkbox sf-checkbox--size-1 flex"><span class="sf-checkbox-box transition flex"><input type="checkbox"><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Ничего не выбрано</span></span></label>
    <code class="text-1/2 color-on-surface-variant">без checked</code>
  </div>
</div>

JavaScript

// The component script moves data-indeterminate into the input property and
// draws the dash. Where the preview runs without the component script, the
// demo does the same so the state stays visible.
document.querySelectorAll('input[data-indeterminate]').forEach((input) => {
  if (window.SF?.Checkbox?.setState) {
    window.SF.Checkbox.setState(input, {checked: false, indeterminate: true});
    return;
  }
  input.indeterminate = true;
  const icon = input.parentElement?.querySelector('.sf-icon');
  if (icon && icon.textContent === '') icon.textContent = 'remove';
});

Недоступен

Нативный disabled приглушает индикатор и текст в любом состоянии отметки, в том числе в смешанном; флажок не получает фокус и не отправляется с формой.

НедоступныйНе получает фокус disabled

Недоступный отмеченный disabled checked

HTML

<div class="flex flex-wrap gap-4">
  <div class="flex flex-col gap-1">
    <label class="sf-checkbox sf-checkbox--size-1 flex"><span class="sf-checkbox-box transition flex"><input type="checkbox" disabled><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Недоступный</span><span class="sf-checkbox-description">Не получает фокус</span></span></label>
    <code class="text-1/2 color-on-surface-variant">disabled</code>
  </div>
  <div class="flex flex-col gap-1">
    <label class="sf-checkbox sf-checkbox--size-1 flex"><span class="sf-checkbox-box transition flex"><input type="checkbox" checked disabled><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Недоступный отмеченный</span></span></label>
    <code class="text-1/2 color-on-surface-variant">disabled checked</code>
  </div>
</div>

Ошибка

Класс error на оболочке окрашивает рамку индикатора цветом ошибки. Текст ошибки кладите в пояснение и связывайте с input через aria-describedby, сам input получает aria-invalid="true".

Согласие с условиямиПодтвердите согласие, чтобы продолжить error, не отмечен

Согласие с условиями error, отмечен

HTML

<div class="flex flex-wrap gap-4">
  <div class="flex flex-col gap-1">
    <label class="sf-checkbox error sf-checkbox--size-1 flex"><span class="sf-checkbox-box transition flex"><input type="checkbox" aria-invalid="true" aria-describedby="terms-error"><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Согласие с условиями</span><span class="sf-checkbox-description" id="terms-error">Подтвердите согласие, чтобы продолжить</span></span></label>
    <code class="text-1/2 color-on-surface-variant">error, не отмечен</code>
  </div>
  <div class="flex flex-col gap-1">
    <label class="sf-checkbox error sf-checkbox--size-1 flex"><span class="sf-checkbox-box transition flex"><input type="checkbox" checked aria-invalid="true"><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Согласие с условиями</span></span></label>
    <code class="text-1/2 color-on-surface-variant">error, отмечен</code>
  </div>
</div>

Фокус

При переходе клавишей Tab индикатор получает кольцо фокуса по :focus-visible. В примере фокус показан классом focus-visible на input, который CSS компонента читает наравне с :focus-visible.

Фокус на неотмеченном focus-visible

Фокус на отмеченном focus-visible checked

HTML

<div class="flex flex-wrap gap-4">
  <div class="flex flex-col gap-1">
    <label class="sf-checkbox sf-checkbox--size-1 flex"><span class="sf-checkbox-box transition flex"><input type="checkbox" class="focus-visible"><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Фокус на неотмеченном</span></span></label>
    <code class="text-1/2 color-on-surface-variant">focus-visible</code>
  </div>
  <div class="flex flex-col gap-1">
    <label class="sf-checkbox sf-checkbox--size-1 flex"><span class="sf-checkbox-box transition flex"><input type="checkbox" class="focus-visible" checked><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Фокус на отмеченном</span></span></label>
    <code class="text-1/2 color-on-surface-variant">focus-visible checked</code>
  </div>
</div>

Доступность

Видимая подпись лежит внутри того же <label>, что и input.
Группу флажков оборачивайте в <fieldset> с <legend>: легенда называет общий вопрос и сообщает, что можно выбрать несколько вариантов. Каждый флажок группы отправляет собственное значение.
Ошибку сообщайте текстом: одного цвета недостаточно.
Не отмечайте варианты заранее без предметной причины.
Флажок переключается пробелом; видимый фокус рисует компонент.
Индикатор в начале строки стоит на логическом начале и зеркалится при письме справа налево.

Какие уведомления получать?

Можно выбрать несколько вариантов

Новости продукта Приглашения на мероприятия Новые исследования

HTML

<fieldset class="border-0 p-0 m-0">
  <legend class="m-bottom-1 weight-6">Какие уведомления получать?</legend>
  <p class="m-top-0 m-bottom-2 color-on-surface-variant">Можно выбрать несколько вариантов</p>
  <div class="flex flex-col gap-2">
    <label class="sf-checkbox sf-checkbox--size-1 flex"><span class="sf-checkbox-box transition flex"><input name="notifications[]" type="checkbox" value="product"><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Новости продукта</span></span></label>
    <label class="sf-checkbox sf-checkbox--size-1 flex"><span class="sf-checkbox-box transition flex"><input name="notifications[]" type="checkbox" value="events"><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Приглашения на мероприятия</span></span></label>
    <label class="sf-checkbox sf-checkbox--size-1 flex"><span class="sf-checkbox-box transition flex"><input name="notifications[]" type="checkbox" value="research"><span class="sf-icon" aria-hidden="true"></span></span><span class="sf-checkbox-container flex flex-col"><span class="sf-checkbox-label">Новые исследования</span></span></label>
  </div>
</fieldset>

JavaScript

SF.Checkbox.setState(input, state) меняет состояние нативного флажка и перерисовывает индикатор:

JavaScript

const input = document.querySelector('input[name="mixed"]');
SF.Checkbox.setState(input, {checked: false, indeterminate: true, disabled: false});

Функция принимает только <input type="checkbox"> и поля checked, indeterminate, disabled; для другого элемента она возвращает false. Событие change она не создаёт: после изменения значения приложение само отправляет нужное событие и обновляет свою модель данных.

Компонент регистрирует класс Checkbox, который собирает флажок из параметров. SF.Loader появляется к событию sf-loader-init на window; SF.Loader.ready('Checkbox', callback) передаёт класс, когда он зарегистрирован.

JavaScript

const whenLoader = (run) => (window.SF?.Loader ? run() : window.addEventListener('sf-loader-init', run, {once: true}));

whenLoader(() => SF.Loader.ready('Checkbox', (Checkbox) => {
  const checkbox = new Checkbox({
    param: {name: 'updates', value: 'yes', title: 'Получать обновления', size: '1'},
  });
  document.querySelector('#settings').append(checkbox.render());
}));

Параметры: title, description, help (имя значка подсказки), size (1/2, 1, 2), name, value, checked, disabled, indeterminate. attrs переносятся на input, класс из attrs.class — на оболочку.

Классы

Что	Классы
Блок	`sf-checkbox`
Части	`sf-checkbox-box`, `sf-checkbox-container`, `sf-checkbox-description`, `sf-checkbox-label`, `sf-checkbox-top`
Размеры	`sf-checkbox--size-1`, `sf-checkbox--size-1/2`, `sf-checkbox--size-2`

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Переменные

Настройка

Эти переменные — поверхность настройки компонента. Их имена стабильны: переименовать или убрать такую переменную можно только через журнал изменений, с предупреждением, как атрибут. Framework их не задаёт, поэтому значение можно поставить на сам компонент (.sf-checkbox) или на любого предка. Переменные действуют на спокойный вид; наведение, фокус, нажатие, недоступность и ошибка рисуются поверх, поэтому состояния остаются видны.

Переменная	Что задаёт	По умолчанию
`--sf-checkbox-background-color`	Заливка квадрата без отметки; у отмеченного, ошибки и недоступного — своя.	`var(--sf-surface-0)`
`--sf-checkbox-border-color`	Рамка квадрата без отметки; у отмеченного, наведения, ошибки и недоступного — своя.	`var(--sf-outline)`
`--sf-checkbox-border-width`	Толщина рамки квадрата со всех сторон.	`var(--sf-px)`
`--sf-checkbox-radius`	Скругление углов квадрата.	`var(--sf-radius--ui)`
`--sf-checkbox-size`	Ширина и высота квадрата.	`var(--sf-text-height-1)`; зависит от размера
`--sf-checkbox-gap`	Промежуток между квадратом и подписью.	`var(--sf-ui-1--text-space-x)`; зависит от размера

CSS

.sf-checkbox {
  --sf-checkbox-radius: 0;
}

Устройство

Остальные переменные — внутренняя проводка компонента: модификаторы задают им значения, а части их читают. Их имена и устройство могут меняться в любом выпуске, поэтому проект их не задаёт. Значение по умолчанию — из базового правила блока (.sf-checkbox); переменную без него задают только модификаторы.

Переменная	По умолчанию	Задаёт
`--sf-checkbox--gap`	не задана; задают модификаторы, например `.sf-checkbox--size-1/2`: `var(--sf-checkbox-gap, var(--sf-ui-1/2--text-space-x))`	`gap`
`--sf-checkbox-box--background-color`	не задана; задают модификаторы, например `.sf-checkbox .sf-checkbox-box`: `var(--sf-checkbox-background-color, var(--sf-surface-0))`	`background-color`
`--sf-checkbox-box--border`	не задана; задают модификаторы, например `.sf-checkbox .sf-checkbox-box`: `var(--sf-checkbox-border-width, var(--sf-px)) solid`	`border`, `border-color`, `border-end-end-radius`, `border-end-start-radius`, `border-start-end-radius`, `border-start-start-radius`
`--sf-checkbox-box--border-color`	не задана; задают модификаторы, например `.sf-checkbox .sf-checkbox-box`: `var(--sf-checkbox-border-color, var(--sf-outline))`	`border-color`
`--sf-checkbox-box--border-end-end-radius`	не задана; задают модификаторы, например `.sf-checkbox .sf-checkbox-box`: `var(--sf-checkbox-radius, var(--sf-radius--ui))`	`border-end-end-radius`
`--sf-checkbox-box--border-end-start-radius`	не задана; задают модификаторы, например `.sf-checkbox .sf-checkbox-box`: `var(--sf-checkbox-radius, var(--sf-radius--ui))`	`border-end-start-radius`
`--sf-checkbox-box--border-start-end-radius`	не задана; задают модификаторы, например `.sf-checkbox .sf-checkbox-box`: `var(--sf-checkbox-radius, var(--sf-radius--ui))`	`border-start-end-radius`
`--sf-checkbox-box--border-start-start-radius`	не задана; задают модификаторы, например `.sf-checkbox .sf-checkbox-box`: `var(--sf-checkbox-radius, var(--sf-radius--ui))`	`border-start-start-radius`
`--sf-checkbox-box--box-shadow`	не задана; задают модификаторы, например `.sf-checkbox[:has(input:not(:disabled):not(.disabled).focus-visible)] .sf-checkbox-box`: `none`	`box-shadow`
`--sf-checkbox-box--height`	не задана; задают модификаторы, например `.sf-checkbox.sf-checkbox--size-1/2 .sf-checkbox-box`: `var(--sf-checkbox-size, var(--sf-text-height-1/2))`	`height`
`--sf-checkbox-box--width`	не задана; задают модификаторы, например `.sf-checkbox.sf-checkbox--size-1/2 .sf-checkbox-box`: `var(--sf-checkbox-size, var(--sf-text-height-1/2))`	`width`
`--sf-checkbox-container--background-color`	не задана; задают модификаторы, например `.sf-checkbox .sf-checkbox-container`: `transparent`	`background-color`
`--sf-checkbox-description--color`	не задана; задают модификаторы, например `.sf-checkbox .sf-checkbox-description`: `var(--sf-on-surface-variant)`	`color`
`--sf-checkbox-description--font-family`	не задана; задают модификаторы, например `.sf-checkbox .sf-checkbox-description`: `var(--sf-text--family)`	`font-family`
`--sf-checkbox-description--font-size`	не задана; задают модификаторы, например `.sf-checkbox.sf-checkbox--size-1/2 .sf-checkbox-description`: `var(--sf-text-size-1/3)`	`font-size`
`--sf-checkbox-description--font-weight`	не задана; задают модификаторы, например `.sf-checkbox .sf-checkbox-description`: `var(--sf-font-weight-regular)`	`font-weight`
`--sf-checkbox-description--line-height`	не задана; задают модификаторы, например `.sf-checkbox.sf-checkbox--size-1/2 .sf-checkbox-description`: `var(--sf-text-height-1/3)`	`line-height`
`--sf-checkbox-label--background-color`	не задана; задают модификаторы, например `.sf-checkbox .sf-checkbox-label`: `transparent`	`background-color`
`--sf-checkbox-label--color`	не задана; задают модификаторы, например `.sf-checkbox:not(.error)[:has(input:not(:checked))] .sf-checkbox-label`: `var(--sf-on-surface)`	`color`
`--sf-checkbox-label--font-family`	не задана; задают модификаторы, например `.sf-checkbox .sf-checkbox-label`: `var(--sf-text--family)`	`font-family`
`--sf-checkbox-label--font-size`	не задана; задают модификаторы, например `.sf-checkbox.sf-checkbox--size-1/2 .sf-checkbox-label`: `var(--sf-text-size-1/2)`	`font-size`
`--sf-checkbox-label--font-weight`	не задана; задают модификаторы, например `.sf-checkbox .sf-checkbox-label`: `var(--sf-font-weight-medium)`	`font-weight`
`--sf-checkbox-label--line-height`	не задана; задают модификаторы, например `.sf-checkbox.sf-checkbox--size-1/2 .sf-checkbox-label`: `var(--sf-text-height-1/2)`	`line-height`
`--sf-checkbox-top--background-color`	не задана; задают модификаторы, например `.sf-checkbox .sf-checkbox-top`: `transparent`	`background-color`
`--sf-checkbox-top--gap`	не задана; задают модификаторы, например `.sf-checkbox .sf-checkbox-top`: `var(--sf-space-1/4)`	`gap`

Навигация

Главное

Документация

Содержание

Флажок

Пример

Разметка

Варианты

Размер

Состав

Положение индикатора

Состояния

Отмечен

Смешанное

Недоступен

Ошибка

Фокус

Доступность

JavaScript

Классы

Переменные

Настройка

Устройство

См. также

Настройки

Флажок

Пример

Разметка

Варианты

Размер

Состав

Положение индикатора

Состояния

Отмечен

Смешанное

Недоступен

Ошибка

Фокус

Доступность

JavaScript

Классы

Переменные

Настройка

Устройство

См. также

Поиск по документации