Cheques e rádios

Crie caixas de seleção e rádios consistentes entre navegadores e dispositivos com nosso componente de cheques completamente reescrito.

Nesta página

Abordagem

As caixas de seleção e rádios padrão do navegador são substituídas com a ajuda de .form-check, uma série de classes para ambos os tipos de entrada que melhora o layout e o comportamento de seus elementos HTML, proporcionando maior personalização e consistência entre navegadores. As caixas de seleção são para selecionar uma ou várias opções em uma lista, enquanto os rádios são para selecionar uma opção entre muitas.

Estruturalmente, nossos <input>s e <label>s são elementos irmãos em oposição a um <input>dentro de um <label>. Isso é um pouco mais detalhado, pois você deve especificar ide foratributos para relacionar o <input>and <label>. Usamos o seletor irmão ( ~) para todos os nossos <input>estados, como :checkedou :disabled. Quando combinado com a .form-check-labelclasse, podemos estilizar facilmente o texto de cada item com base no <input>estado do .

Nossas verificações usam ícones personalizados do Bootstrap para indicar estados verificados ou indeterminados.

Verificações

Caixa de seleção padrão

Caixa de seleção marcada

<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>

Indeterminado

As caixas de seleção podem utilizar a :indeterminatepseudoclasse quando configuradas manualmente via JavaScript (não há atributo HTML disponível para especificá-lo).

Caixa de seleção indeterminada

<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>

Desabilitado

Adicione o disabledatributo e os <label>s associados são estilizados automaticamente para corresponder a uma cor mais clara para ajudar a indicar o estado da entrada.

Caixa de seleção desativada

<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>

Rádios

Rádio padrão

Rádio verificado por padrão

<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>

Desabilitado

Adicione o disabledatributo e os <label>s associados são estilizados automaticamente para corresponder a uma cor mais clara para ajudar a indicar o estado da entrada.

Rádio desativado

Rádio verificado desativado

<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>

Comuta

Um switch tem a marcação de uma caixa de seleção personalizada, mas usa a .form-switchclasse para renderizar um switch de alternância. Considere usar role="switch"para transmitir com mais precisão a natureza do controle para tecnologias assistivas que suportam essa função. Em tecnologias assistivas mais antigas, ele será simplesmente anunciado como uma caixa de seleção regular como alternativa. Os switches também suportam o disabledatributo.

Entrada da caixa de seleção do interruptor padrão

Entrada da caixa de seleção do interruptor verificado

Entrada de caixa de seleção de chave desativada

Entrada de caixa de seleção de chave marcada desativada

<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>

Padrão (empilhado)

Por padrão, qualquer número de caixas de seleção e rádios que são irmãos imediatos serão empilhados verticalmente e espaçados adequadamente com .form-check.

Caixa de seleção padrão

Caixa de seleção desativada

<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>

Rádio padrão

Segundo rádio padrão

Rádio desativado

<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>

Em linha

Agrupe caixas de seleção ou rádios na mesma linha horizontal adicionando .form-check-inlinea qualquer arquivo .form-check.

3 (desativado)

<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 (desativado)

<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>

Sem rótulos

Omita o encapsulamento .form-checkpara caixas de seleção e rádios que não possuem texto de rótulo. Lembre-se de ainda fornecer algum tipo de nome acessível para tecnologias assistivas (por exemplo, usando aria-label). Consulte a seção de acessibilidade da visão geral dos formulários para obter detalhes.

<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>

Botões de alternância

Crie caixas de seleção e botões de opção semelhantes a botões usando .btnestilos em vez de .form-check-labelelementos <label>. Esses botões de alternância podem ser agrupados em um grupo de botões, se necessário.

Botões de alternância da caixa de seleção

Alternar simples

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

Verificado

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

Desabilitado

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

Visualmente, esses botões de alternância da caixa de seleção são idênticos aos botões de alternância do plug -in de botão . No entanto, eles são transmitidos de maneira diferente pelas tecnologias assistivas: as alternâncias de caixa de seleção serão anunciadas pelos leitores de tela como "marcadas"/"não marcadas" (já que, apesar de sua aparência, ainda são fundamentalmente caixas de seleção), enquanto os botões de alternância do plug-in de botão serão anunciado como "botão"/"botão pressionado". A escolha entre essas duas abordagens dependerá do tipo de alternância que você está criando e se a alternância fará ou não sentido para os usuários quando anunciada como uma caixa de seleção ou como um botão real.

Botões de alternância de rádio

Verificado Rádio Desabilitado Rádio

<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>

Estilos delineados

Diferentes variantes de .btn, como os vários estilos delineados, são suportadas.

Alternar simples
Verificado
Rádio de sucesso verificado Rádio de perigo

<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>

Sass

Variáveis

$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;