Чеки та радіо

Створюйте узгоджені прапорці та радіостанції для різних браузерів і пристроїв за допомогою нашого повністю переписаного компонента перевірок.

На цій сторінці

Підхід

Стандартні прапорці та радіостанції веб-переглядача замінено за допомогою .form-checkсерії класів для обох типів введення, що покращує макет і поведінку їхніх елементів HTML, що забезпечує кращі налаштування та узгодженість між браузерами. Прапорці призначені для вибору одного або кількох варіантів у списку, а радіо — для вибору одного варіанту з багатьох.

Структурно наші <input>s і <label>s є братськими елементами на відміну від елементів <input>усередині a <label>. Це трохи докладніше, оскільки ви повинні вказати атрибути idand for, щоб пов’язати <input>and <label>. Ми використовуємо селектор однорідного рівня ( ~) для всіх наших <input>станів, наприклад :checkedабо :disabled. У поєднанні з .form-check-labelкласом ми можемо легко стилізувати текст для кожного елемента на основі стану <input>'s.

Наші перевірки використовують спеціальні піктограми Bootstrap для позначення перевірених або невизначених станів.

Чеки

Прапорець за замовчуванням

Поставлений прапорець

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Checked checkbox
  </label>
</div>

Невизначений

Прапорці можуть використовувати :indeterminateпсевдоклас, якщо вручну встановити за допомогою JavaScript (немає доступного HTML-атрибуту для його визначення).

Невизначений прапорець

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
  <label class="form-check-label" for="flexCheckIndeterminate">
    Indeterminate checkbox
  </label>
</div>

Вимкнено

Додайте disabledатрибут, і пов’язані <label>s будуть автоматично стилізовані відповідно до більш світлого кольору, щоб допомогти вказати стан введення.

Прапорець вимкнено

Вимкнено прапорець

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
  <label class="form-check-label" for="flexCheckDisabled">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexCheckCheckedDisabled">
    Disabled checked checkbox
  </label>
</div>

Радіостанції

Стандартне радіо

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

Вимкнено

Відключене радіо

Відключено перевірене радіо

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
  <label class="form-check-label" for="flexRadioDisabled">
    Disabled radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexRadioCheckedDisabled">
    Disabled checked radio
  </label>
</div>

Перемикачі

Перемикач має розмітку спеціального прапорця, але використовує .form-switchклас для візуалізації тумблера. role="switch"Щоб точніше передати характер контролю, подумайте про використання допоміжних технологій, які підтримують цю роль . У старих допоміжних технологіях це буде просто оголошено як звичайний прапорець як запасний варіант. Перемикачі також підтримують disabledатрибут.

Введення прапорця перемикача за замовчуванням

Перевірено введення прапорця

Вимкнено введення прапорця перемикача

Вимкнено введення прапорця для позначеного перемикача

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

За замовчуванням (стосований)

За замовчуванням будь-яка кількість прапорців і радіоприймачів, які є безпосередніми однорідними елементами, буде розміщено вертикально та відповідно розподілено з .form-check.

Прапорець за замовчуванням

Прапорець вимкнено

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

Стандартне радіо

Друге радіо за замовчуванням

Відключене радіо

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

В лінію

Згрупуйте прапорці або радіостанції в одному горизонтальному рядку, додавши .form-check-inlineдо будь-якого .form-check.

3 (вимкнено)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

3 (вимкнено)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Без ярликів

Пропустіть обтікання .form-checkдля прапорців і радіостанцій, які не мають тексту мітки. Пам’ятайте про те, що для допоміжних технологій необхідно надати певну форму доступної назви (наприклад, за допомогою aria-label). Докладніше див. у розділі доступності огляду форм .

<div>
  <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>

<div>
  <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
</div>

Кнопки перемикання

Створюйте кнопки-прапорці та перемикачі, використовуючи .btnстилі, а не .form-check-labelелементи <label>. За потреби ці кнопки-перемикачі можна згрупувати в групу кнопок .

Кнопки перемикання прапорців

Одинарний перемикач

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>

Перевірено

<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>

Вимкнено

<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>

Візуально ці кнопки перемикання прапорців ідентичні кнопкам перемикання плагіна кнопок . Однак допоміжні технології передають їх по-іншому: перемикачі прапорців будуть оголошені програмами зчитування з екрана як «позначені»/«не позначені» (оскільки, незважаючи на свій зовнішній вигляд, вони все ще є прапорцями), тоді як кнопки перемикання плагінів кнопок будуть оголошується як «кнопка»/«кнопка натиснута». Вибір між цими двома підходами залежатиме від типу перемикача, який ви створюєте, і від того, чи матиме перемикач сенс для користувачів, коли він буде оголошений як прапорець або як фактична кнопка.

Кнопки перемикання радіо

Перевірено радіо Вимкнено радіо

<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-secondary" for="option1">Checked</label>

<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label class="btn btn-secondary" for="option2">Radio</label>

<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
<label class="btn btn-secondary" for="option3">Disabled</label>

<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
<label class="btn btn-secondary" for="option4">Radio</label>

Окреслені стилі

Підтримуються різні варіанти .btn, наприклад, різні окреслені стилі.

Одинарний перемикач
Перевірено
Перевірений успіх радіо Небезпечне радіо

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>

<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>

<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>

<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>

Сасс

Змінні

$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:                 1px solid rgba($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;