Casillas, radios e interruptores

Elegir varias, elegir una, o activar y desactivar algo. Un significado cada uno, con la etiqueta siempre visible y clicable.

Estos tres controles responden a preguntas distintas. Una casilla es un sí/no que se guarda con el formulario. Un radio elige una opción de un grupo. Un interruptor cambia un ajuste en el momento, y es una casilla con aspecto de palanca.

Cuándo usarlo

Úsalo

Una casilla para opciones que se pueden combinar, y para un sí/no dentro de un formulario.
Radios para de 2 a 5 opciones donde hay que elegir una; el grupo lleva fieldset y legend.
Un interruptor solo para un ajuste que se aplica en cuanto cambia.
La etiqueta forma parte del área de clic: label con for.

No

Usar un interruptor en un formulario con botón Guardar; usa una casilla.
Usar una casilla donde solo una opción es válida.
Ocultar la etiqueta o sustituirla por un icono.
Redibujar la caja, el punto o el riel en un plugin.

Anatomía

Un control tiene la caja (cuadrada, redonda o un riel con una bola), la marca dentro cuando está activo y la etiqueta a su lado. Las filas se apilan con el espaciado del formulario, o van en una línea con form-check-inline.

Variantes y estados

Casillas y radios

Estados

Interruptor

Off

Disabled

En línea

Notify me by

Message

Mobile app

Combinaciones

Combinación	Para qué usarla
Casilla × grupo	Varias que se pueden combinar. En un `fieldset` con `legend`, una bajo otra o en una línea (`form-check-inline`).
Radio × grupo	De 2 a 5 opciones donde hay que elegir exactamente una. Siempre con una marcada por defecto cuando hay un valor razonable.
Interruptor × inmediato	Un ajuste que se aplica en cuanto cambia, con la etiqueta diciendo qué activa («Notificaciones»).
Casilla × validación	`is-invalid` con su mensaje bajo la etiqueta; la etiqueta también pasa al color de peligro.

Qué cambia Didactika y por qué

Qué cambiamos	Por qué ayuda
Cajas de 18 px con un borde de 1,5 px y contraste 3:1	Las cajas de Bootstrap son pequeñas y pálidas. Estas son fáciles de pulsar y siempre visibles, vacías o no.
La marca es blanca sobre el color primario	Una casilla marcada es lo más saturado del formulario, así que el estado se lee de un vistazo y no por la forma de una marca.
El interruptor tiene un hueco hasta su etiqueta y una bola sin color propio	La etiqueta nunca toca el riel, y la bola funciona con cualquier color del tema.
Los controles desactivados atenúan también su etiqueta	Toda la fila se lee como no disponible, no solo la caja.

Clases

Clase	Qué hace
`form-check`	Envuelve un control y su etiqueta
`form-check-input`, `form-check-label`	El control y su etiqueta
`form-check-inline`	Pone las opciones en una línea
`form-switchcustom-switch`	Convierte la casilla en un interruptor
`is-invalid`	El estado inválido, con su mensaje

En esta versión

Bootstrap 5.3 dibuja el foco como un anillo suave y guarda cada color en variables CSS (--bs-*), así que un tema recolorea un control con una sola variable. Un interruptor es un form-check con form-switch y role="switch".

Bootstrap 4.6 dibuja el foco como una sombra de color y compila los colores de cada control, así que un tema lo recolorea recompilando su hoja de estilos. Un interruptor es un custom-control custom-switch con un custom-control-input y un custom-control-label.

Accesibilidad

La etiqueta es clicable y la leen los lectores de pantalla; nunca un input sin ella.
Un grupo de radios o casillas va en un fieldset con legend.
Un interruptor lleva role="switch" y guarda el estado en checked.
Espacio activa, las flechas se mueven dentro de un grupo de radios: conserva los inputs nativos.
Nunca señales el estado solo con color: la marca interior debe cambiar.