Чекбоксы и радио-кнопки Bootstrap 5

Рекомендуемые курсы:

Флажки

Пример

<div class="form-check">
  Если вы хотите, чтобы пользователи могли выбирать любое количество вариантов из预设ного списка, используйте флажки.
  <input class="form-check-input" type="checkbox" id="check1" name="option1" value="что-то" checked>
</div>

Попробуйте сами

<label class="form-check-label">Выбор 1</label>

примеры объяснения Для настройки стиля флажка используйте class="form-check"

затем, чтобы обеспечить соответствующий отступ для этикетки и флажка, можно использовать элемент обертки. .form-check-label класс добавить к элементу тега, и затем .form-check-input добавить к .form-check внутри контейнера, чтобы правильно установить стиль флажка.

Если вы хотите по умолчанию选中 флажок, пожалуйста, используйте checked свойства.

Переключатели

Если вы хотите ограничить пользователей только одним из выбранных вариантов из предварительно определенного списка, используйте переключатели.

Пример

<div class="form-check">
  <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Выбор 1
  <label class="form-check-label" for="radio1"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Выбор 2
  <label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" disabled>Выбор 3
  <label class="form-check-label"></label>
</div>

Попробуйте сами

переключатель

Если вы хотите установить флажок в виде переключателя, пожалуйста, установите .form-switch Классы и .form-check Использование контейнеров вместе:

Пример

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
  <label class="form-check-label" for="mySwitch">Тёмный режим</label>
</div>

Попробуйте сами