Casillas de verificación y botones de opción (Checks and radios)
Crea casillas de verificación (checkboxes) y botones de opción (radios) consistentes en diferentes navegadores y dispositivos con nuestro componente de verificación completamente rediseñado.
Enfoque
Las casillas de verificación y los botones de opción predeterminados 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 sus elementos HTML, lo que proporciona una mayor personalización y consistencia entre navegadores. Las casillas de verificación sirven para seleccionar una o varias opciones de una lista, mientras que los botones de opción sirven para seleccionar una opción entre muchas.
Estructuralmente, nuestros <input> y <label> son elementos hermanos en lugar de tener un <input> dentro de un <label>. Esto es un poco más detallado ya que debes especificar los atributos id y for para relacionar el <input> y el <label>. Usamos el selector de hermanos (~) para todos nuestros estados de <input>, como :checked o :disabled. Cuando se combina con la clase .form-check-label, podemos diseñar fácilmente el estilo del texto de cada elemento en función del estado de la entrada <input>.
Nuestras verificaciones utilizan iconos personalizados de Bootstrap para indicar estados marcados o indeterminados.
Casillas de verificación (Checks)
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkDefault">
<label class="form-check-label" for="checkDefault">
Casilla de verificación predeterminada
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkChecked" checked>
<label class="form-check-label" for="checkChecked">
Casilla de verificación marcada
</label>
</div>Indeterminado
Las casillas de verificación pueden utilizar la pseudoclase :indeterminate cuando se configuran manualmente mediante JavaScript (no hay ningún atributo HTML disponible para especificarlo).
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkIndeterminate">
<label class="form-check-label" for="checkIndeterminate">
Casilla de verificación indeterminada
</label>
</div>Deshabilitado
Agrega el atributo disabled y las etiquetas <label> asociadas se diseñarán automáticamente para que coincidan 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="checkIndeterminateDisabled" disabled>
<label class="form-check-label" for="checkIndeterminateDisabled">
Casilla de verificación indeterminada deshabilitada
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkDisabled" disabled>
<label class="form-check-label" for="checkDisabled">
Casilla de verificación deshabilitada
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkCheckedDisabled" checked disabled>
<label class="form-check-label" for="checkCheckedDisabled">
Casilla de verificación marcada deshabilitada
</label>
</div>Botones de opción (Radios)
<div class="form-check">
<input class="form-check-input" type="radio" name="radioDefault" id="radioDefault1">
<label class="form-check-label" for="radioDefault1">
Botón de opción predeterminado
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioDefault" id="radioDefault2" checked>
<label class="form-check-label" for="radioDefault2">
Botón de opción marcado predeterminado
</label>
</div>Deshabilitado
Agrega el atributo disabled y las etiquetas <label> asociadas se diseñarán automáticamente para que coincidan 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="radioDisabled" id="radioDisabled" disabled>
<label class="form-check-label" for="radioDisabled">
Botón de opción deshabilitado
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioDisabled" id="radioCheckedDisabled" checked disabled>
<label class="form-check-label" for="radioCheckedDisabled">
Botón de opción marcado deshabilitado
</label>
</div>Interruptores (Switches)
Un interruptor (switch) tiene el marcado de una casilla de verificación personalizada pero utiliza la clase .form-switch para representar un interruptor de palanca. Considera usar role="switch" para transmitir con mayor precisión la naturaleza del control a las tecnologías de asistencia que admiten este rol. En tecnologías de asistencia más antiguas, simplemente se anunciará como una casilla de verificación normal como respaldo. Los interruptores también admiten el atributo disabled.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckDefault">
<label class="form-check-label" for="switchCheckDefault">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="switchCheckChecked" checked>
<label class="form-check-label" for="switchCheckChecked">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="switchCheckDisabled" disabled>
<label class="form-check-label" for="switchCheckDisabled">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="switchCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="switchCheckCheckedDisabled">Entrada de casilla de verificación de interruptor marcada deshabilitada</label>
</div>Interruptores nativos
Mejora progresivamente tus interruptores para Safari móvil (iOS 17.4+) agregando un atributo switch a tu entrada para habilitar la respuesta háptica al alternar interruptores, al igual que los interruptores nativos de iOS. No hay cambios de estilo asociados al uso de este atributo en Bootstrap, ya que todos nuestros interruptores utilizan estilos personalizados.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" value="" id="checkNativeSwitch" switch>
<label class="form-check-label" for="checkNativeSwitch">
Respuesta háptica nativa de interruptores
</label>
</div>Asegúrate de leer más sobre el atributo switch en el blog de WebKit. Safari 17.4+ tanto en macOS como en iOS tiene interruptores de estilo nativo en HTML, mientras que otros navegadores simplemente recurren a la apariencia de la casilla de verificación estándar. Aplicar el atributo a una casilla de verificación que no sea de Bootstrap en versiones más recientes de Safari renderizará un interruptor nativo.
Predeterminado (apilado)
De forma predeterminada, cualquier cantidad de casillas de verificación y botones de opción 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">
Botón de opción predeterminado
</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">
Segundo botón de opción predeterminado
</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">
Botón de opción deshabilitado
</label>
</div>En línea (Inline)
Agrupa casillas de verificación o botones de opción 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>Inverso (Reverse)
Coloca tus casillas de verificación, botones de opción 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="switchCheckReverse">
<label class="form-check-label" for="switchCheckReverse">Entrada de casilla de verificación de interruptor inversa</label>
</div>Sin etiquetas
Omite el contenedor .form-check para casillas de verificación y botones de opción que no tengan texto de etiqueta. Recuerda proporcionar de todos modos alguna forma de nombre accesible para tecnologías de asistencia (por ejemplo, usando aria-label). Consulta la sección de accesibilidad en la descripción 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 (Toggle buttons)
Crea casillas de verificación y botones de opción similares a botones utilizando estilos .btn en lugar de .form-check-label en los elementos <label>. Estos botones de alternancia se pueden agrupar en un grupo de botones si es necesario.
Botones de alternancia de casillas 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 casilla 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 los controles de casilla de verificación como "marcado"/"no marcado" (ya que, a pesar de su apariencia, son fundamentalmente casillas de verificación), mientras que los botones de alternancia del complemento de botón se anunciarán 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">Opción</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">Opción</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">Opción</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">Opción</label>Estilos de contorno (Outlined)
Se admiten diferentes variantes de .btn, como los diversos estilos de contorno (outlined).
<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">Botón de opción 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">Botón de opción de peligro</label>CSS
Variables Sass
Variables para casillas de verificación:
$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:
$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;