Pola wyboru i przyciski wyboru Bootstrap 5

Pola wyboru

Jeśli chcesz, aby użytkownik mógł wybrać dowolną liczbę opcji z listy wstępnie ustawionej, użyj pól wyboru.

Przykład

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1" name="option1" value="coś" checked>
  <label class="form-check-label">Opcja 1</label>
</div>

Spróbuj sam

przykłady wyjaśnienia

Aby ustawić styl pola wyboru, użyj class="form-check" opakowanie elementu, aby zapewnić odpowiednią margines wokół etykiety i pola wyboru.

następnie, umieść .form-check-label klasę do elementu etykiety, a następnie .form-check-input dodaj do .form-check kontenera, aby poprawnie ustawić styl pola wyboru.

Jeśli chcesz domyślnie zaznaczyć pole wyboru, użyj checked Atrybuty.

Przyciski radiowe

Jeśli chcesz ograniczyć użytkownika do wyboru jednej z zaproponowanych opcji z listy, użyj przycisków radiowych.

Przykład

<div class="form-check">
  <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>opcja 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">opcja 2
  <label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" disabled>opcja 3
  <label class="form-check-label"></label>
</div>

Spróbuj sam

przełącznik

Jeśli chcesz ustawić przycisk wyboru jako styl przełącznika, użyj .form-switch Klasa i .form-check Użycie kontenera razem:

Przykład

<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">Tryb ciemny</label>
</div>

Spróbuj sam