Cмотреть на GitHub
Чекбоксы и радиокнопки
Создавайте кросс-браузерные и кросс-платформенные чекбоксы и радиокнопки с нашим полностью переписанными компонентами.
На этой странице
Подход
Чекбоксы и радиокнопки в браузере по умолчанию теперь заменяются с помощью .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"> Default checkbox </label></div><divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="flexCheckChecked"checked><labelclass="form-check-label"for="flexCheckChecked"> Checked checkbox </label></div>Неопределенный
Стандартные чекбоксы могут использовать псевдокласс :indeterminate, заданный вручную через JavaScript (т.к. нет в HTML атрибута для его спецификации).
<divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="flexCheckIndeterminate"><labelclass="form-check-label"for="flexCheckIndeterminate"> Indeterminate checkbox </label></div>Деактивированные
Добавьте булеан disabled в <input> и стандартный индикатор и лейбл-описание автоматически соответственно стилизуются.
<divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="flexCheckDisabled"disabled><labelclass="form-check-label"for="flexCheckDisabled"> Disabled checkbox </label></div><divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="flexCheckCheckedDisabled"checkeddisabled><labelclass="form-check-label"for="flexCheckCheckedDisabled"> Disabled checked checkbox </label></div>Радиокнопки
<divclass="form-check"><inputclass="form-check-input"type="radio"name="flexRadioDefault"id="flexRadioDefault1"><labelclass="form-check-label"for="flexRadioDefault1"> Default radio </label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="flexRadioDefault"id="flexRadioDefault2"checked><labelclass="form-check-label"for="flexRadioDefault2"> Default checked radio </label></div>Деактивированные
Добавьте атрибут disabled и для связанных тегов <label> будет автоматически применен стиль, соответствующий более светлому цвету, чтобы обозначить соответствующее состояние ввода.
<divclass="form-check"><inputclass="form-check-input"type="radio"name="flexRadioDisabled"id="flexRadioDisabled"disabled><labelclass="form-check-label"for="flexRadioDisabled"> Disabled radio </label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="flexRadioDisabled"id="flexRadioCheckedDisabled"checkeddisabled><labelclass="form-check-label"for="flexRadioCheckedDisabled"> Disabled checked radio </label></div>Выключатели
Выключатель имеет разметку пользовательского флажка, но использует класс .custom-switch для рендеринга тумблера. Выключатели также поддерживают атрибут отключенния disabled.
<divclass="form-check form-switch"><inputclass="form-check-input"type="checkbox"id="flexSwitchCheckDefault"><labelclass="form-check-label"for="flexSwitchCheckDefault">Default switch checkbox input</label></div><divclass="form-check form-switch"><inputclass="form-check-input"type="checkbox"id="flexSwitchCheckChecked"checked><labelclass="form-check-label"for="flexSwitchCheckChecked">Checked switch checkbox input</label></div><divclass="form-check form-switch"><inputclass="form-check-input"type="checkbox"id="flexSwitchCheckDisabled"disabled><labelclass="form-check-label"for="flexSwitchCheckDisabled">Disabled switch checkbox input</label></div><divclass="form-check form-switch"><inputclass="form-check-input"type="checkbox"id="flexSwitchCheckCheckedDisabled"checkeddisabled><labelclass="form-check-label"for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label></div>По умолчанию (расположенные по вертикали)
По умолчанию, любое количество идущих один за другим чекбоксов и радиокнопок будет располагаться сверху вниз, а класс .form-check правильно отрегулирует пространство между ними.
<divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="defaultCheck1"><labelclass="form-check-label"for="defaultCheck1"> Default checkbox </label></div><divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="defaultCheck2"disabled><labelclass="form-check-label"for="defaultCheck2"> Disabled checkbox </label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios1"value="option1"checked><labelclass="form-check-label"for="exampleRadios1"> Default radio </label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios2"value="option2"><labelclass="form-check-label"for="exampleRadios2"> Second default radio </label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios3"value="option3"disabled><labelclass="form-check-label"for="exampleRadios3"> Disabled radio </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 (disabled)</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 (disabled)</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">Single toggle</label><inputtype="checkbox"class="btn-check"id="btn-check-2"checkedautocomplete="off"><labelclass="btn btn-primary"for="btn-check-2">Checked</label><inputtype="checkbox"class="btn-check"id="btn-check-3"autocomplete="off"disabled><labelclass="btn btn-primary"for="btn-check-3">Disabled</label>
Визуально эти кнопки переключения идентичны кнопкам переключения плагинов кнопок. Однако вспомогательные технологии передают их по-другому: переключатели чекбоксов будут объявлены программами чтения с экрана как «отмеченные» / «не отмеченные» (поскольку, несмотря на их внешний вид, они по сути остаются чекбоксами), тогда как кнопки переключения плагинов кнопок будут объявляется как «кнопка» / «кнопка нажата». Выбор между этими двумя подходами будет зависеть от типа создаваемого вами переключателя и от того, будет ли этот переключатель иметь смысл для пользователей, когда он объявлен как чекбокс или как фактическая кнопка.
Кнопки переключения радиокнопок
<inputtype="radio"class="btn-check"name="options"id="option1"autocomplete="off"checked><labelclass="btn btn-secondary"for="option1">Checked</label><inputtype="radio"class="btn-check"name="options"id="option2"autocomplete="off"><labelclass="btn btn-secondary"for="option2">Radio</label><inputtype="radio"class="btn-check"name="options"id="option3"autocomplete="off"disabled><labelclass="btn btn-secondary"for="option3">Disabled</label><inputtype="radio"class="btn-check"name="options"id="option4"autocomplete="off"><labelclass="btn btn-secondary"for="option4">Radio</label>Стиль контура (рамки)
Поддерживаются различные варианты .btn, как например, в различных выделенных стилях.
<inputtype="checkbox"class="btn-check"id="btn-check-outlined"autocomplete="off"><labelclass="btn btn-outline-primary"for="btn-check-outlined">Single toggle</label><br><inputtype="checkbox"class="btn-check"id="btn-check-2-outlined"checkedautocomplete="off"><labelclass="btn btn-outline-secondary"for="btn-check-2-outlined">Checked</label><br><inputtype="radio"class="btn-check"name="options-outlined"id="success-outlined"autocomplete="off"checked><labelclass="btn btn-outline-success"for="success-outlined">Checked success radio</label><inputtype="radio"class="btn-check"name="options-outlined"id="danger-outlined"autocomplete="off"><labelclass="btn btn-outline-danger"for="danger-outlined">Danger radio</label>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:1pxsolidrgba($black,.25);$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:$input-btn-focus-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 10l3 3l6-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;