Checks y radios
Crea casillas de verificación y radios consistentes en todos los navegadores y dispositivos con nuestro componente de verificación completamente reescrito.
Acercamiento
Las casillas de verificación y radios predeterminadas del navegador se reemplazan con la ayuda de .form-check, una serie de clases para ambos tipos de entrada que mejora el diseño y el comportamiento de tus elementos HTML, que proporcionan una mayor personalización y coherencia entre navegadores. Las casillas de verificación sirven para seleccionar una o varias opciones en una lista, mientras que las radios sirven para seleccionar una opción entre muchas.
Estructuralmente, nuestros <input>s y <label>s son elementos hermanos en lugar de un <input> dentro de un <label>. Esto es un poco más detallado ya que debes especificar los atributos id y for para relacionar los <input> y <label>. Usamos el selector de hermanos (~) para todos nuestros estados <input>, como :checked o :disabled. Cuando se combina con la clase .form-check-label, podemos diseñar fácilmente el texto de cada elemento según el estado del <input>.
Nuestras comprobaciones utilizan íconos Bootstrap personalizados para indicar estados marcados o indeterminados.
Checks
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Casilla de verificación predeterminada
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked="">
<label class="form-check-label" for="flexCheckChecked">
Casilla marcada
</label>
</div>Indeterminado
Las casillas de verificación pueden utilizar la pseudoclase :indeterminate cuando se configuran manualmente a través de JavaScript (opens in a new tab) (no hay ningún atributo HTML disponible para especificarlo).
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
<label class="form-check-label" for="flexCheckIndeterminate">
Casilla de verificación indeterminada
</label>
</div>Deshabilitado
Agrega el atributo disabled y los <label> asociados reciben un estilo automático para que coincida con un color más claro para ayudar a indicar el estado de la entrada.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled="">
<label class="form-check-label" for="flexCheckIndeterminateDisabled">
Casilla de verificación indeterminada deshabilitada
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled="">
<label class="form-check-label" for="flexCheckDisabled">
Casilla de verificación deshabilitada
</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">
Casilla de verificación marcada deshabilitada
</label>
</div>Radios
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Radio predeterminada
</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">
Radio marcada por defecto
</label>
</div>Deshabilitado
Agrega el atributo disabled y los <label> asociados reciben un estilo automático para que coincida con un color más claro para ayudar a indicar el estado de la entrada.
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled="">
<label class="form-check-label" for="flexRadioDisabled">
Radio deshabilitada
</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">
Radio marcada deshabilitada
</label>
</div>Switches
Un interruptor (switch) tiene el marcado de una casilla de verificación personalizada pero usa la clase .form-switch para representar un interruptor de palanca. Considera utilizar role="switch" para transmitir con mayor precisión la naturaleza del control a las tecnologías de asistencia que respaldan esta función. En tecnologías de asistencia más antiguas, simplemente se anunciará como una casilla de verificación normal. Estos conmutadores también admiten el atributo disabled.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Entrada de casilla de verificación de interruptor predeterminada</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">Entrada de casilla de verificación de interruptor marcada</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">Entrada de casilla de verificación de interruptor deshabilitada</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">Entrada de casilla de verificación de interruptor marcada deshabilitada</label>
</div>Predeterminado (apilado)
De forma predeterminada, cualquier número de casillas de verificación y radios que sean hermanos inmediatos se apilarán verticalmente y se espaciarán adecuadamente con .form-check.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Casilla de verificación predeterminada
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled="">
<label class="form-check-label" for="defaultCheck2">
Casilla de verificación deshabilitada
</label>
</div><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">
Radio predeterminada
</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">
Segunda radio predeterminada
</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">
Radio deshabilitada
</label>
</div>Inline
Agrupa casillas de verificación o radios en la misma fila horizontal agregando .form-check-inline a cualquier .form-check.
<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 (deshabilitado)</label>
</div><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 (deshabilitado)</label>
</div>Reverso
Pon tus casillas de verificación, radios e interruptores en el lado opuesto con la clase modificadora .form-check-reverse.
<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
<label class="form-check-label" for="reverseCheck1">
Casilla de verificación inversa
</label>
</div>
<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled="">
<label class="form-check-label" for="reverseCheck2">
Casilla de verificación inversa deshabilitada
</label>
</div>
<div class="form-check form-switch form-check-reverse">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse">
<label class="form-check-label" for="flexSwitchCheckReverse">Entrada de casilla de verificación switch inverso</label>
</div>Sin etiquetas
Omite el ajuste .form-check para casillas de verificación y radios que no tienen texto de etiqueta. Recuerde proporcionar algún tipo de nombre accesible para las tecnologías de asistencia (por ejemplo, usando aria-label). Consulta la sección accesibilidad general de formularios para obtener más detalles.
<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>Botones de alternancia
Crea casillas de verificación y botones de opción similares a botones usando estilos .btn en lugar de .form-check-label en los elementos <label>. Estos botones de alternancia se pueden agrupar además en un grupo de botones si es necesario.
Botones de alternancia de casilla de verificación
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Alternancia única</label>
<input type="checkbox" class="btn-check" id="btn-check-2" checked="" autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Marcado</label>
<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled="">
<label class="btn btn-primary" for="btn-check-3">Deshabilitado</label><input type="checkbox" class="btn-check" id="btn-check-4" autocomplete="off">
<label class="btn" for="btn-check-4">Alternancia única</label>
<input type="checkbox" class="btn-check" id="btn-check-5" checked="" autocomplete="off">
<label class="btn" for="btn-check-5">Marcado</label>
<input type="checkbox" class="btn-check" id="btn-check-6" autocomplete="off" disabled="">
<label class="btn" for="btn-check-6">Deshabilitado</label>Visualmente, estos botones de alternancia de casillas de verificación son idénticos a los botones de alternancia del complemento de botones. Sin embargo, las tecnologías de asistencia los transmiten de manera diferente: los lectores de pantalla anunciarán las casillas de verificación como "marcadas"/"no marcadas" (ya que, a pesar de su apariencia, siguen siendo fundamentalmente casillas de verificación), mientras que los botones de alternancia del complemento de botones serán anunciado como “botón”/“botón presionado”. La elección entre estos dos enfoques dependerá del tipo de alternancia que estés creando y de si la alternancia tendrá sentido para los usuarios cuando se anuncie como una casilla de verificación o como un botón real.
Botones de alternancia de radio
<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked="">
<label class="btn btn-secondary" for="option1">Marcado</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">Deshabilitado</label>
<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
<label class="btn btn-secondary" for="option4">Radio</label><input type="radio" class="btn-check" name="options-base" id="option5" autocomplete="off" checked="">
<label class="btn" for="option5">Marcado</label>
<input type="radio" class="btn-check" name="options-base" id="option6" autocomplete="off">
<label class="btn" for="option6">Radio</label>
<input type="radio" class="btn-check" name="options-base" id="option7" autocomplete="off" disabled="">
<label class="btn" for="option7">Deshabilitado</label>
<input type="radio" class="btn-check" name="options-base" id="option8" autocomplete="off">
<label class="btn" for="option8">Radio</label>Estilos outlined
Se admiten diferentes variantes de .btn, como los distintos estilos descritos.
<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Alternancia única</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">Marcado</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">Radio de éxito marcado.</label>
<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-danger" for="danger-outlined">Radio de peligro</label>CSS
Variables Sass
Variables para checks:
scss/_variables.scss (opens in a new tab)
$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: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
$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: $focus-ring-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 10 3 3 6-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;Variables para interruptores:
scss/_variables.scss (opens in a new tab)
$form-switch-color: rgba($black, .25);
$form-switch-width: 2em;
$form-switch-padding-start: $form-switch-width + .5em;
$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>");
$form-switch-border-radius: $form-switch-width;
$form-switch-transition: background-position .15s ease-in-out;
$form-switch-focus-color: $input-focus-border-color;
$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>");
$form-switch-checked-color: $component-active-color;
$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>");
$form-switch-checked-bg-position: right center;