in English

Cheques e radios

Crea caixas de verificación e radios coherentes entre navegadores e dispositivos cruzados co noso compoñente de comprobacións completamente reescritos.

Nesta páxina

Aproximación

As caixas de verificación e radios predeterminadas do navegador substitúense coa axuda de .form-check, unha serie de clases para ambos os tipos de entrada que mellora o deseño e o comportamento dos seus elementos HTML, que proporcionan unha maior personalización e coherencia entre navegadores. As caixas de verificación son para seleccionar unha ou varias opcións nunha lista, mentres que as radios son para seleccionar unha opción de entre moitas.

Estruturalmente, os nosos <input>s e <label>s son elementos irmáns en oposición a un <input>dentro dun <label>. Isto é un pouco máis detallado xa que debes especificar ide foratributos para relacionar os <input>e <label>. Usamos o selector de irmáns ( ~) para todos os nosos <input>estados, como :checkedou :disabled. Cando se combina coa .form-check-labelclase, podemos facilmente estilizar o texto de cada elemento en función do <input>estado de '.

As nosas comprobacións usan iconas de Bootstrap personalizadas para indicar estados marcados ou indeterminados.

Cheques

Caixa de verificación predeterminada

Casilla de verificación 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 verificación poden utilizar a :indeterminatepseudo-clase cando se definen manualmente mediante JavaScript (non hai ningún atributo HTML dispoñible para especificalo).

Caixa de verificación 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>

Desactivado

Engade o disabledatributo e os <label>s asociados teñen un estilo automaticamente para que coincidan cunha cor máis clara para axudar a indicar o estado da entrada.

Casilla de verificación desactivada

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

Radios

Radio por defecto

Radio comprobada por defecto

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

Desactivado

Engade o disabledatributo e os <label>s asociados teñen un estilo automaticamente para que coincidan cunha cor máis clara para axudar a indicar o estado da entrada.

Radio desactivada

Desactivouse a radio marcada

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

Interruptores

Un interruptor ten o marcado dunha caixa de verificación personalizada pero usa a .form-switchclase para renderizar un interruptor de alternancia. Considere o uso role="switch"para transmitir con máis precisión a natureza do control ás tecnoloxías de asistencia que admiten esta función. Nas tecnoloxías de asistencia máis antigas, simplemente anunciarase como unha caixa de verificación normal como alternativa. Os interruptores tamén admiten o disabledatributo.

Entrada da caixa de verificación do interruptor predeterminado

Marcada a entrada da caixa de verificación do interruptor

Desactivouse a entrada da caixa de verificación do interruptor

Desactivada a entrada da caixa de verificación do interruptor marcada

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

Predeterminado (apilado)

De forma predeterminada, calquera número de caixas de verificación e radios que sexan irmáns inmediatos apilaranse verticalmente e espaciaranse adecuadamente con .form-check.

Caixa de verificación predeterminada

Casilla de verificación desactivada

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

Radio por defecto

Segunda radio predeterminada

Radio desactivada

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

En liña

Agrupe caixas de verificación ou radios na mesma fila horizontal engadindo .form-check-inlinea calquera .form-check.

3 (desactivado)

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

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

Sen etiquetas

Omita o axuste .form-checkpara as caixas de verificación e radios que non teñen texto de etiqueta. Lembra aínda fornecer algún tipo de nome accesible para tecnoloxías de asistencia (por exemplo, usando aria-label). Consulte a sección de accesibilidade da vista xeral dos formularios para obter máis información.

<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óns de alternancia

Crea caixas de verificación e botóns de opción similares a botóns usando .btnestilos en lugar .form-check-labeldos <label>elementos. Estes botóns de alternancia pódense agrupar nun grupo de botóns se é necesario.

Botóns de alternar da caixa de verificación

Conmutador único

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

Comprobado

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

Desactivado

<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, estes botóns de alternar de caixas de verificación son idénticos aos botóns de alternancia do complemento de botóns . Non obstante, as tecnoloxías de asistencia transmítense de forma diferente: os lectores de pantalla anunciarán as opcións de caixa de verificación como "marcadas"/"non marcadas" (xa que, a pesar da súa aparencia, son fundamentalmente caixas de verificación), mentres que os botóns de alternancia do complemento dos botóns serán anunciado como "botón"/"botón presionado". A elección entre estes dous enfoques dependerá do tipo de alternador que estea a crear e de se a alternancia terá ou non sentido para os usuarios cando se anuncie como unha caixa de verificación ou como un botón real.

Botóns de alternancia de radio

Comprobado Radio Desactivado Radio

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

Admítense diferentes variantes de .btn, como nos distintos estilos descritos.

Conmutador único
Comprobado
Comprobouse o éxito da radio Radio 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

Variables

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