Bootstrap5: флажки и радиокнопки
Если вы хотите, чтобы пользователи могли выбрать любое количество вариантов из предустановленного списка, можно использовать флажки:
Пример
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" checked>
<label class="form-check-label">Вариант 1</label>
</div>
Попробуйте сами »
Флажки используют class="form-check" для обеспечения правильных отступов между меткой и флажком.
Класс .form-check-label добавляется к элементу 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-checkиспользовать.form-switchкласс внутри контейнера:
Пример
<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>
Попробуйте сами »