Чекбоксы (флажки) и радиокнопки
Создавайте кросс-браузерные и кросс-платформенные чекбоксы и радиокнопки с нашим полностью переписанными компонентами.
На этой странице
Подход
Чекбоксы и радиокнопки в браузере по умолчанию теперь заменяются с помощью .form-check, цель которого – в улучшении их расположения и «поведения» их элементов HTML. Чекбоксы существуют для выбора одного или нескольких параметров из списка, а радиокнопки - одного.
Структурно наши <input> и <label> являются одноуровневыми элементами, в отличие от <input> внутри <label>. Это немного более сложно, так как вы должны указать id и for, чтобы связать <input> и <label>. Мы используем родственный селектор (~) для всех наших состояний <input>, например: :checked или :disabled. В сочетании с классом .form-check-label мы можем легко стилизовать текст для каждого элемента на основе состояния <input>.
В наших проверках используются пользовательские значки Bootstrap для обозначения отмеченных или неопределенных состояний.
Чекбоксы (Флажки)
<divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="flexCheckDefault"><labelclass="form-check-label"for="flexCheckDefault"> Флажок по умолчанию
</label></div><divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="flexCheckChecked"checked><labelclass="form-check-label"for="flexCheckChecked"> Выбранный флажок
</label></div>Неопределенный
Чекбоксы могут использовать псевдокласс :indeterminate при ручной установке через JavaScript (нет доступного атрибута HTML для его указания).
<divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="flexCheckIndeterminate"><labelclass="form-check-label"for="flexCheckIndeterminate"> Неопределенный флажок
</label></div>Отключенные
Добавьте атрибут disabled, и для связанных тегов <label> будет автоматически применен стиль, соответствующий более светлому цвету, чтобы помочь указать состояние ввода.
<divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="flexCheckIndeterminateDisabled"disabled><labelclass="form-check-label"for="flexCheckIndeterminateDisabled"> Отключен неопределенный флажок
</label></div><divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="flexCheckDisabled"disabled><labelclass="form-check-label"for="flexCheckDisabled"> Отключенный флажок
</label></div><divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="flexCheckCheckedDisabled"checkeddisabled><labelclass="form-check-label"for="flexCheckCheckedDisabled"> Отключенный выбранный флажок
</label></div>Радиокнопки
<divclass="form-check"><inputclass="form-check-input"type="radio"name="flexRadioDefault"id="flexRadioDefault1"><labelclass="form-check-label"for="flexRadioDefault1"> Радио по умолчанию
</label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="flexRadioDefault"id="flexRadioDefault2"checked><labelclass="form-check-label"for="flexRadioDefault2"> Радио выбранное по умолчанию
</label></div>Отключенные
Добавьте атрибут disabled, и для связанных тегов <label> будет автоматически применен стиль, соответствующий более светлому цвету, чтобы помочь указать состояние ввода.
<divclass="form-check"><inputclass="form-check-input"type="radio"name="flexRadioDisabled"id="flexRadioDisabled"disabled><labelclass="form-check-label"for="flexRadioDisabled"> Отключенное радио
</label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="flexRadioDisabled"id="flexRadioCheckedDisabled"checkeddisabled><labelclass="form-check-label"for="flexRadioCheckedDisabled"> Отключенное выбранное радио
</label></div>Переключатели
Переключатель имеет разметку настраиваемого флажка, но для визуализации переключателя использует класс .form-switch. Рассмотрите возможность использования role="switch", чтобы более точно передать характер управления вспомогательным технологиям, которые поддерживают эту роль. В старых вспомогательных технологиях это будет просто объявлено как обычный флажок в качестве запасного варианта. Коммутаторы также поддерживают атрибут disabled.
<divclass="form-check form-switch"><inputclass="form-check-input"type="checkbox"role="switch"id="flexSwitchCheckDefault"><labelclass="form-check-label"for="flexSwitchCheckDefault">Ввод флажка переключателя по умолчанию</label></div><divclass="form-check form-switch"><inputclass="form-check-input"type="checkbox"role="switch"id="flexSwitchCheckChecked"checked><labelclass="form-check-label"for="flexSwitchCheckChecked">Выбран флажок переключателя ввода</label></div><divclass="form-check form-switch"><inputclass="form-check-input"type="checkbox"role="switch"id="flexSwitchCheckDisabled"disabled><labelclass="form-check-label"for="flexSwitchCheckDisabled">Отключено переключение флажка ввода</label></div><divclass="form-check form-switch"><inputclass="form-check-input"type="checkbox"role="switch"id="flexSwitchCheckCheckedDisabled"checkeddisabled><labelclass="form-check-label"for="flexSwitchCheckCheckedDisabled">Отключено переключение флажка в поле ввода</label></div>По умолчанию (расположенные по вертикали)
По умолчанию любое количество флажков и радио, которые являются ближайшими родственниками, будут располагаться вертикально и соответствующим образом разнесены с помощью .form-check.
<divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="defaultCheck1"><labelclass="form-check-label"for="defaultCheck1"> Флажок по умолчанию
</label></div><divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="defaultCheck2"disabled><labelclass="form-check-label"for="defaultCheck2"> Отключенный флажок
</label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios1"value="option1"checked><labelclass="form-check-label"for="exampleRadios1"> Радио по умолчанию
</label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios2"value="option2"><labelclass="form-check-label"for="exampleRadios2"> Второе радио по умолчанию
</label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios3"value="option3"disabled><labelclass="form-check-label"for="exampleRadios3"> Отключенное радио
</label></div>Строчные
Сгруппируйте флажки или радио в одном горизонтальном ряду, добавив .form-check-inline к любому .form-check.
<divclass="form-check form-check-inline"><inputclass="form-check-input"type="checkbox"id="inlineCheckbox1"value="option1"><labelclass="form-check-label"for="inlineCheckbox1">1</label></div><divclass="form-check form-check-inline"><inputclass="form-check-input"type="checkbox"id="inlineCheckbox2"value="option2"><labelclass="form-check-label"for="inlineCheckbox2">2</label></div><divclass="form-check form-check-inline"><inputclass="form-check-input"type="checkbox"id="inlineCheckbox3"value="option3"disabled><labelclass="form-check-label"for="inlineCheckbox3">3 (отключенный)</label></div><divclass="form-check form-check-inline"><inputclass="form-check-input"type="radio"name="inlineRadioOptions"id="inlineRadio1"value="option1"><labelclass="form-check-label"for="inlineRadio1">1</label></div><divclass="form-check form-check-inline"><inputclass="form-check-input"type="radio"name="inlineRadioOptions"id="inlineRadio2"value="option2"><labelclass="form-check-label"for="inlineRadio2">2</label></div><divclass="form-check form-check-inline"><inputclass="form-check-input"type="radio"name="inlineRadioOptions"id="inlineRadio3"value="option3"disabled><labelclass="form-check-label"for="inlineRadio3">3 (отключенный)</label></div>Реверс
Поместите флажки, радио и переключатели на противоположную сторону с помощью класса-модификатора .form-check-reverse.
<divclass="form-check form-check-reverse"><inputclass="form-check-input"type="checkbox"value=""id="reverseCheck1"><labelclass="form-check-label"for="reverseCheck1"> Обратный флажок
</label></div><divclass="form-check form-check-reverse"><inputclass="form-check-input"type="checkbox"value=""id="reverseCheck2"disabled><labelclass="form-check-label"for="reverseCheck2"> Отключен обратный флажок
</label></div><divclass="form-check form-switch form-check-reverse"><inputclass="form-check-input"type="checkbox"id="flexSwitchCheckReverse"><labelclass="form-check-label"for="flexSwitchCheckReverse">Вход флажка обратного переключателя</label></div>Без меток
Не используйте упаковку .form-check для флажков и радио, у которых нет текстовой метки. Не забудьте по-прежнему предоставить доступное имя для вспомогательных технологий (например, с помощью aria-label). Дополнительные сведения см. в разделе специальные возможности обзора форм .
<div><inputclass="form-check-input"type="checkbox"id="checkboxNoLabel"value=""aria-label="..."></div><div><inputclass="form-check-input"type="radio"name="radioNoLabel"id="radioNoLabel1"value=""aria-label="..."></div>Кнопки переключения
Создавайте чекбоксы и радиокнопки, используя стили .btn вместо .form-check-label для элементов <label>. При необходимости эти кнопки-переключатели можно сгруппировать в группу кнопок.
Кнопки переключения чекбоксов
<inputtype="checkbox"class="btn-check"id="btn-check"autocomplete="off"><labelclass="btn btn-primary"for="btn-check">Одиночный переключатель</label><inputtype="checkbox"class="btn-check"id="btn-check-2"checkedautocomplete="off"><labelclass="btn btn-primary"for="btn-check-2">Выбранный</label><inputtype="checkbox"class="btn-check"id="btn-check-3"autocomplete="off"disabled><labelclass="btn btn-primary"for="btn-check-3">Отключенный</label>
Визуально эти кнопки переключения флажков идентичны кнопкам переключения плагинов кнопок. Однако вспомогательные технологии передают их по-другому: переключатели флажков будут объявлены программами чтения с экрана как “отмеченные”/“не отмеченные” (поскольку, несмотря на их внешний вид, они по сути остаются флажками), тогда как кнопки переключения плагинов кнопок будут объявляется как “кнопка”/“кнопка нажата”. Выбор между этими двумя подходами будет зависеть от типа создаваемого вами переключателя, а также от того, будет ли этот переключатель иметь смысл для пользователей, когда он будет объявлен как флажок или как фактическая кнопка.
Кнопки переключения радиокнопок
<inputtype="radio"class="btn-check"name="options"id="option1"autocomplete="off"checked><labelclass="btn btn-secondary"for="option1">Выбранная</label><inputtype="radio"class="btn-check"name="options"id="option2"autocomplete="off"><labelclass="btn btn-secondary"for="option2">Радио</label><inputtype="radio"class="btn-check"name="options"id="option3"autocomplete="off"disabled><labelclass="btn btn-secondary"for="option3">Отключенная</label><inputtype="radio"class="btn-check"name="options"id="option4"autocomplete="off"><labelclass="btn btn-secondary"for="option4">Радио</label>Стиль контура (рамки)
Поддерживаются различные варианты .btn, например, в различных выделенных стилях.
<inputtype="checkbox"class="btn-check"id="btn-check-outlined"autocomplete="off"><labelclass="btn btn-outline-primary"for="btn-check-outlined">Одиночный переключатель</label><br><inputtype="checkbox"class="btn-check"id="btn-check-2-outlined"checkedautocomplete="off"><labelclass="btn btn-outline-secondary"for="btn-check-2-outlined">Выбранный</label><br><inputtype="radio"class="btn-check"name="options-outlined"id="success-outlined"autocomplete="off"checked><labelclass="btn btn-outline-success"for="success-outlined">Выбранный радио цвета success</label><inputtype="radio"class="btn-check"name="options-outlined"id="danger-outlined"autocomplete="off"><labelclass="btn btn-outline-danger"for="danger-outlined">Радио цвета danger</label>CSS
Sass переменные
Переменные для флажков:
$form-check-input-width:1em;$form-check-min-height:$font-size-base*$line-height-base;$form-check-padding-start:$form-check-input-width+.5em;$form-check-margin-bottom:.125rem;$form-check-label-color:null;$form-check-label-cursor:null;$form-check-transition:null;$form-check-input-active-filter:brightness(90%);$form-check-input-bg:$input-bg;$form-check-input-border:var(--#{$prefix}border-width)solidvar(--#{$prefix}border-color);$form-check-input-border-radius:.25em;$form-check-radio-border-radius:50%;$form-check-input-focus-border:$input-focus-border-color;$form-check-input-focus-box-shadow:$focus-ring-box-shadow;$form-check-input-checked-color:$component-active-color;$form-check-input-checked-bg-color:$component-active-bg;$form-check-input-checked-border-color:$form-check-input-checked-bg-color;$form-check-input-checked-bg-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");$form-check-radio-checked-bg-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");$form-check-input-indeterminate-color:$component-active-color;$form-check-input-indeterminate-bg-color:$component-active-bg;$form-check-input-indeterminate-border-color:$form-check-input-indeterminate-bg-color;$form-check-input-indeterminate-bg-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");$form-check-input-disabled-opacity:.5;$form-check-label-disabled-opacity:$form-check-input-disabled-opacity;$form-check-btn-check-disabled-opacity:$btn-disabled-opacity;$form-check-inline-margin-end:1rem;Переменные для переключателей:
$form-switch-color:rgba($black,.25);$form-switch-width:2em;$form-switch-padding-start:$form-switch-width+.5em;$form-switch-bg-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>");$form-switch-border-radius:$form-switch-width;$form-switch-transition:background-position.15sease-in-out;$form-switch-focus-color:$input-focus-border-color;$form-switch-focus-bg-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>");$form-switch-checked-color:$component-active-color;$form-switch-checked-bg-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>");$form-switch-checked-bg-position:rightcenter;