Caixa de Seleção e Botão de Rádio Bootstrap 5

Caixa de seleção

Se você deseja que o usuário selecione uma quantidade arbitrária de opções da lista de opções pré-definida, use a caixa de seleção.

Exemplo

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" checked>
  <label class="form-check-label">Opção 1</label>
</div>

Experimente pessoalmente

exemplo de explicação

Para definir o estilo da caixa de seleção, use class="form-check" o elemento de embalagem, para garantir que o rótulo e a caixa de seleção tenham margem apropriada.

Em seguida, adicionar .form-check-label classe ao elemento de rótulo e, em seguida, adicionar .form-check-input Adicionar a .form-check dentro do contêiner para configurar corretamente o estilo do checkbox.

Se você desejar que o checkbox esteja marcado por padrão, use checked Atributos.

Botões de rádio

Se você quiser limitar o usuário a escolher apenas uma das opções pré-definidas da lista, use botões de rádio.

Exemplo

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

Experimente pessoalmente

Interruptor

Se você deseja definir o estilo do checkbox como interruptor de alternância, por favor, use .form-switch Classes e .form-check Uso conjunto de contêineres:

Exemplo

<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">Modo escuro</label>
</div>

Experimente pessoalmente