Checkbox, radio y switch

Checkboxes y radios básicos

Los checkboxes y radio buttons son elementos fundamentales en formularios que permiten al usuario seleccionar opciones de manera intuitiva. Bootstrap proporciona un sistema consistente para estilizar estos elementos mediante la clase .form-check, transformando los controles nativos del navegador en elementos visualmente atractivos y coherentes con el resto del framework.

Estructura básica de form-check

Bootstrap utiliza una estructura específica para organizar estos elementos de selección. Cada checkbox o radio button debe estar contenido dentro de un elemento con la clase .form-check, que actúa como contenedor principal:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Opción por defecto
  </label>
</div>

La estructura siempre incluye tres elementos clave:

• .form-check: Contenedor principal que proporciona el espaciado y posicionamiento correcto
• .form-check-input: Clase aplicada al elemento <input> que aplica los estilos visuales
• .form-check-label: Clase para la etiqueta que mejora la tipografía y el espaciado

Checkboxes básicos

Los checkboxes permiten al usuario seleccionar múltiples opciones de una lista. Su principal característica es que cada opción es independiente, por lo que el usuario puede marcar tantas como desee:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="html" id="checkHTML">
  <label class="form-check-label" for="checkHTML">
    HTML
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="css" id="checkCSS">
  <label class="form-check-label" for="checkCSS">
    CSS
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="javascript" id="checkJS">
  <label class="form-check-label" for="checkJS">
    JavaScript
  </label>
</div>

Cada checkbox funciona de manera independiente, permitiendo al usuario seleccionar HTML y JavaScript sin afectar la selección de CSS. Esta flexibilidad los hace ideales para preferencias, configuraciones o filtros múltiples.

Radio buttons básicos

Los radio buttons están diseñados para selecciones mutuamente excluyentes, donde el usuario solo puede elegir una opción de un grupo relacionado. Para crear un grupo de radios, todos deben compartir el mismo atributo name:

<div class="form-check">
  <input class="form-check-input" type="radio" name="experiencia" id="principiante" value="principiante">
  <label class="form-check-label" for="principiante">
    Principiante
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="experiencia" id="intermedio" value="intermedio">
  <label class="form-check-label" for="intermedio">
    Intermedio
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="experiencia" id="avanzado" value="avanzado">
  <label class="form-check-label" for="avanzado">
    Avanzado
  </label>
</div>

El atributo name="experiencia" es crucial para que los radio buttons funcionen como un grupo. Cuando el usuario selecciona "Intermedio", automáticamente se deselecciona cualquier otra opción del mismo grupo.

Estados básicos

Bootstrap incluye soporte visual para los estados más comunes de estos elementos. El estado checked se maneja automáticamente cuando el input tiene el atributo correspondiente:

<!-- Checkbox marcado por defecto -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkMarcado" checked>
  <label class="form-check-label" for="checkMarcado">
    Opción ya seleccionada
  </label>
</div>

<!-- Radio button seleccionado por defecto -->
<div class="form-check">
  <input class="form-check-input" type="radio" name="defecto" id="radioMarcado" value="si" checked>
  <label class="form-check-label" for="radioMarcado">
    Opción preseleccionada
  </label>
</div>

Estado deshabilitado

Para deshabilitar checkboxes o radios, se utiliza el atributo disabled. Bootstrap aplica automáticamente los estilos visuales apropiados, reduciendo la opacidad y cambiando el cursor:

<!-- Checkbox deshabilitado -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkDeshabilitado" disabled>
  <label class="form-check-label" for="checkDeshabilitado">
    No se puede seleccionar
  </label>
</div>

<!-- Radio button deshabilitado y marcado -->
<div class="form-check">
  <input class="form-check-input" type="radio" name="bloqueado" id="radioBloqueado" value="bloqueado" disabled checked>
  <label class="form-check-label" for="radioBloqueado">
    Selección bloqueada
  </label>
</div>

Diferencias clave entre checkboxes y radios

Es fundamental comprender las diferencias conceptuales entre estos elementos:

• Checkboxes: Permiten múltiples selecciones independientes. Cada uno funciona como un interruptor individual que puede estar encendido o apagado sin afectar otros.

• Radio buttons: Solo permiten una selección por grupo. Seleccionar uno automáticamente deselecciona los demás del mismo name.

• Casos de uso: Los checkboxes son ideales para preferencias, términos y condiciones, o filtros múltiples. Los radios funcionan mejor para opciones como género, método de pago, o nivel de experiencia.

La sintaxis de Bootstrap mantiene consistencia entre ambos tipos, cambiando únicamente el atributo type y la lógica del atributo name según las necesidades de selección del formulario.

Grupos y conjuntos de opciones

Organizar checkboxes y radio buttons en grupos coherentes mejora significativamente la usabilidad y comprensión de los formularios. Bootstrap proporciona utilidades específicas para agrupar estos elementos tanto visual como funcionalmente, permitiendo crear interfaces más claras y organizadas.

Agrupación con contenedores semánticos

La agrupación lógica de opciones relacionadas debe reflejarse en la estructura HTML utilizando elementos semánticos apropiados. El elemento <fieldset> junto con <legend> proporciona la base semántica ideal para grupos de opciones:

<fieldset class="mb-3">
  <legend class="form-label">Tecnologías de interés</legend>
  
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="frontend" id="checkFrontend">
    <label class="form-check-label" for="checkFrontend">
      Desarrollo Frontend
    </label>
  </div>
  
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="backend" id="checkBackend">
    <label class="form-check-label" for="checkBackend">
      Desarrollo Backend
    </label>
  </div>
  
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="mobile" id="checkMobile">
    <label class="form-check-label" for="checkMobile">
      Desarrollo Mobile
    </label>
  </div>
</fieldset>

El <fieldset> actúa como contenedor lógico que agrupa elementos relacionados, mientras que <legend> proporciona un título descriptivo que los lectores de pantalla asocian automáticamente con todos los controles del grupo.

Elementos inline con form-check-inline

Para optimizar el espacio horizontal y crear interfaces más compactas, Bootstrap incluye la clase .form-check-inline que permite alinear checkboxes y radios en la misma línea:

<fieldset class="mb-3">
  <legend class="form-label">Método de contacto preferido</legend>
  
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="contacto" id="contactoEmail" value="email">
    <label class="form-check-label" for="contactoEmail">
      Email
    </label>
  </div>
  
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="contacto" id="contactoTelefono" value="telefono">
    <label class="form-check-label" for="contactoTelefono">
      Teléfono
    </label>
  </div>
  
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="contacto" id="contactoSMS" value="sms">
    <label class="form-check-label" for="contactoSMS">
      SMS
    </label>
  </div>
</fieldset>

La clase .form-check-inline mantiene todo el espaciado y alineación vertical apropiados mientras permite que múltiples opciones coexistan horizontalmente, siendo especialmente útil para grupos con pocas opciones y etiquetas cortas.

Grupos de checkboxes relacionados

Cuando se manejan múltiples categorías de checkboxes, es importante agruparlos conceptualmente para facilitar la comprensión del usuario:

<form>
  <!-- Grupo de habilidades técnicas -->
  <fieldset class="mb-4">
    <legend class="form-label">Habilidades técnicas</legend>
    
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="html" id="skillHTML">
      <label class="form-check-label" for="skillHTML">
        HTML/CSS
      </label>
    </div>
    
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="javascript" id="skillJS">
      <label class="form-check-label" for="skillJS">
        JavaScript
      </label>
    </div>
    
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="python" id="skillPython">
      <label class="form-check-label" for="skillPython">
        Python
      </label>
    </div>
  </fieldset>

  <!-- Grupo de intereses profesionales -->
  <fieldset class="mb-4">
    <legend class="form-label">Áreas de interés</legend>
    
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" value="diseno" id="interesDiseno">
      <label class="form-check-label" for="interesDiseno">
        Diseño UX/UI
      </label>
    </div>
    
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" value="gestion" id="interesGestion">
      <label class="form-check-label" for="interesGestion">
        Gestión de proyectos
      </label>
    </div>
    
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" value="marketing" id="interesMarketing">
      <label class="form-check-label" for="interesMarketing">
        Marketing digital
      </label>
    </div>
  </fieldset>
</form>

Grupos de radio buttons múltiples

Cuando un formulario requiere varias decisiones independientes usando radio buttons, cada grupo debe tener un name único y estar claramente separado:

<form>
  <fieldset class="mb-4">
    <legend class="form-label">Experiencia laboral</legend>
    
    <div class="form-check">
      <input class="form-check-input" type="radio" name="experiencia" id="exp1" value="junior">
      <label class="form-check-label" for="exp1">
        Menos de 2 años
      </label>
    </div>
    
    <div class="form-check">
      <input class="form-check-input" type="radio" name="experiencia" id="exp2" value="mid">
      <label class="form-check-label" for="exp2">
        2-5 años
      </label>
    </div>
    
    <div class="form-check">
      <input class="form-check-input" type="radio" name="experiencia" id="exp3" value="senior">
      <label class="form-check-label" for="exp3">
        Más de 5 años
      </label>
    </div>
  </fieldset>

  <fieldset class="mb-4">
    <legend class="form-label">Modalidad de trabajo preferida</legend>
    
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="modalidad" id="remoto" value="remoto">
      <label class="form-check-label" for="remoto">
        Remoto
      </label>
    </div>
    
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="modalidad" id="presencial" value="presencial">
      <label class="form-check-label" for="presencial">
        Presencial
      </label>
    </div>
    
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="modalidad" id="hibrido" value="hibrido">
      <label class="form-check-label" for="hibrido">
        Híbrido
      </label>
    </div>
  </fieldset>
</form>

Cada grupo tiene un name diferente (experiencia y modalidad), lo que permite selecciones independientes en cada categoría mientras mantiene la funcionalidad de selección única dentro de cada grupo.

Combinación de layouts verticales e inline

Los formularios complejos a menudo requieren una combinación de layouts según el contenido y el espacio disponible:

<div class="row">
  <div class="col-md-6">
    <fieldset class="mb-4">
      <legend class="form-label">Servicios de interés</legend>
      
      <!-- Layout vertical para opciones con descripciones largas -->
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="consultoria" id="servConsultoria">
        <label class="form-check-label" for="servConsultoria">
          Consultoría técnica especializada
        </label>
      </div>
      
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="desarrollo" id="servDesarrollo">
        <label class="form-check-label" for="servDesarrollo">
          Desarrollo de aplicaciones a medida
        </label>
      </div>
      
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="formacion" id="servFormacion">
        <label class="form-check-label" for="servFormacion">
          Formación y capacitación del equipo
        </label>
      </div>
    </fieldset>
  </div>
  
  <div class="col-md-6">
    <fieldset class="mb-4">
      <legend class="form-label">Urgencia del proyecto</legend>
      
      <!-- Layout inline para opciones simples -->
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="urgencia" id="urgBaja" value="baja">
        <label class="form-check-label" for="urgBaja">
          Baja
        </label>
      </div>
      
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="urgencia" id="urgMedia" value="media">
        <label class="form-check-label" for="urgMedia">
          Media
        </label>
      </div>
      
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="urgencia" id="urgAlta" value="alta">
        <label class="form-check-label" for="urgAlta">
          Alta
        </label>
      </div>
    </fieldset>
  </div>
</div>

Espaciado y organización visual

Bootstrap aplica espaciado consistente automáticamente, pero es importante considerar la organización visual cuando se manejan múltiples grupos:

<form class="needs-validation" novalidate>
  <!-- Separación clara entre grupos usando mb-4 -->
  <fieldset class="mb-4 p-3 border rounded">
    <legend class="form-label fw-bold">Información personal</legend>
    
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="genero" id="generoM" value="masculino">
      <label class="form-check-label" for="generoM">Masculino</label>
    </div>
    
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="genero" id="generoF" value="femenino">
      <label class="form-check-label" for="generoF">Femenino</label>
    </div>
    
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="genero" id="generoO" value="otro">
      <label class="form-check-label" for="generoO">Otro</label>
    </div>
  </fieldset>
  
  <fieldset class="mb-4 p-3 border rounded">
    <legend class="form-label fw-bold">Preferencias de comunicación</legend>
    
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="newsletter" id="prefNewsletter">
      <label class="form-check-label" for="prefNewsletter">
        Recibir newsletter semanal
      </label>
    </div>
    
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="promociones" id="prefPromociones">
      <label class="form-check-label" for="prefPromociones">
        Ofertas y promociones especiales
      </label>
    </div>
  </fieldset>
</form>

El uso de utilidades de espaciado (mb-4), bordes (border, rounded) y padding (p-3) ayuda a crear una jerarquía visual clara que facilita la navegación y comprensión del formulario.

Switches y estados especiales

Los switches en Bootstrap representan una variación visual de los checkboxes que proporciona una interfaz más intuitiva para opciones de activación/desactivación. A diferencia de los checkboxes tradicionales, los switches comunican claramente el concepto de "encendido" y "apagado", siendo especialmente efectivos para configuraciones, preferencias y controles de estado.

Estructura básica de switches

Un switch se crea aplicando la clase .form-switch al contenedor .form-check, manteniendo la misma estructura HTML que los checkboxes pero con una apariencia visual distintiva:

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">
    Activar notificaciones
  </label>
</div>

La clase .form-switch transforma automáticamente el checkbox en un interruptor deslizante, mientras que el atributo role="switch" mejora la accesibilidad proporcionando información semántica adicional a los lectores de pantalla.

Switches activados por defecto

Los switches pueden inicializarse en estado activado utilizando el atributo checked, proporcionando un punto de partida claro para configuraciones que normalmente están habilitadas:

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="switchActivado" checked>
  <label class="form-check-label" for="switchActivado">
    Recibir actualizaciones automáticas
  </label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="switchDesactivado">
  <label class="form-check-label" for="switchDesactivado">
    Modo oscuro
  </label>
</div>

Switches deshabilitados

Los switches pueden encontrarse en estado deshabilitado cuando ciertas condiciones impiden que el usuario modifique la configuración. Bootstrap aplica automáticamente los estilos visuales apropiados:

<!-- Switch deshabilitado en estado inactivo -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="switchBloqueado" disabled>
  <label class="form-check-label" for="switchBloqueado">
    Función premium (requiere suscripción)
  </label>
</div>

<!-- Switch deshabilitado en estado activo -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="switchForzado" checked disabled>
  <label class="form-check-label" for="switchForzado">
    Configuración obligatoria del sistema
  </label>
</div>

El estado deshabilitado reduce la opacidad visual y previene la interacción del usuario, comunicando claramente que la opción no está disponible temporalmente o requiere permisos especiales.

Switches inline

Similar a los checkboxes, los switches pueden organizarse horizontalmente usando la clase .form-check-inline para crear interfaces más compactas:

<fieldset class="mb-3">
  <legend class="form-label">Preferencias de privacidad</legend>
  
  <div class="form-check form-switch form-check-inline">
    <input class="form-check-input" type="checkbox" role="switch" id="switchCookies">
    <label class="form-check-label" for="switchCookies">
      Cookies
    </label>
  </div>
  
  <div class="form-check form-switch form-check-inline">
    <input class="form-check-input" type="checkbox" role="switch" id="switchAnalytics">
    <label class="form-check-label" for="switchAnalytics">
      Analytics
    </label>
  </div>
  
  <div class="form-check form-switch form-check-inline">
    <input class="form-check-input" type="checkbox" role="switch" id="switchMarketing">
    <label class="form-check-label" for="switchMarketing">
      Marketing
    </label>
  </div>
</fieldset>

Casos de uso específicos para switches

Los switches son especialmente efectivos en contextos donde el usuario necesita comprender rápidamente el estado actual y las consecuencias del cambio:

<div class="card">
  <div class="card-header">
    <h5 class="card-title mb-0">Configuración de cuenta</h5>
  </div>
  <div class="card-body">
    <div class="form-check form-switch mb-3">
      <input class="form-check-input" type="checkbox" role="switch" id="perfilPublico" checked>
      <label class="form-check-label" for="perfilPublico">
        Perfil público visible
      </label>
      <div class="form-text">Permite que otros usuarios encuentren tu perfil</div>
    </div>
    
    <div class="form-check form-switch mb-3">
      <input class="form-check-input" type="checkbox" role="switch" id="notifEmail" checked>
      <label class="form-check-label" for="notifEmail">
        Notificaciones por email
      </label>
      <div class="form-text">Recibe alertas importantes en tu bandeja de entrada</div>
    </div>
    
    <div class="form-check form-switch mb-3">
      <input class="form-check-input" type="checkbox" role="switch" id="autenticacion2FA">
      <label class="form-check-label" for="autenticacion2FA">
        Autenticación de dos factores
      </label>
      <div class="form-text">Añade una capa extra de seguridad a tu cuenta</div>
    </div>
  </div>
</div>

Estados contextuales y feedback visual

Los switches mantienen consistencia visual con el sistema de colores de Bootstrap, aunque su diseño inherente ya comunica efectivamente el estado activo/inactivo:

<div class="alert alert-info">
  <div class="form-check form-switch mb-2">
    <input class="form-check-input" type="checkbox" role="switch" id="switchDemo1" checked>
    <label class="form-check-label" for="switchDemo1">
      <strong>Función activada</strong> - Los cambios se aplicarán inmediatamente
    </label>
  </div>
  
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" id="switchDemo2">
    <label class="form-check-label" for="switchDemo2">
      <strong>Función desactivada</strong> - Actívala para acceder a las opciones avanzadas
    </label>
  </div>
</div>

Switches en formularios complejos

Cuando se integran switches en formularios extensos, es importante mantener una jerarquía clara y agrupar funcionalidades relacionadas:

<form>
  <div class="row">
    <div class="col-md-6">
      <fieldset class="mb-4">
        <legend class="form-label">Configuración de aplicación</legend>
        
        <div class="form-check form-switch mb-2">
          <input class="form-check-input" type="checkbox" role="switch" id="autoGuardado" checked>
          <label class="form-check-label" for="autoGuardado">
            Autoguardado cada 5 minutos
          </label>
        </div>
        
        <div class="form-check form-switch mb-2">
          <input class="form-check-input" type="checkbox" role="switch" id="modoOffline">
          <label class="form-check-label" for="modoOffline">
            Permitir trabajo offline
          </label>
        </div>
        
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="sincronizacion" checked>
          <label class="form-check-label" for="sincronizacion">
            Sincronización automática
          </label>
        </div>
      </fieldset>
    </div>
    
    <div class="col-md-6">
      <fieldset class="mb-4">
        <legend class="form-label">Configuración de interfaz</legend>
        
        <div class="form-check form-switch mb-2">
          <input class="form-check-input" type="checkbox" role="switch" id="animaciones" checked>
          <label class="form-check-label" for="animaciones">
            Animaciones y transiciones
          </label>
        </div>
        
        <div class="form-check form-switch mb-2">
          <input class="form-check-input" type="checkbox" role="switch" id="sonidos">
          <label class="form-check-label" for="sonidos">
            Sonidos de notificación
          </label>
        </div>
        
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="tooltips" checked>
          <label class="form-check-label" for="tooltips">
            Mostrar ayudas contextuales
          </label>
        </div>
      </fieldset>
    </div>
  </div>
</form>

Diferencias clave entre switches y checkboxes

Es importante comprender cuándo usar cada elemento:

• Switches: Ideales para configuraciones, activación/desactivación de funciones, estados binarios con consecuencias inmediatas. Su diseño comunica claramente "encendido/apagado".

• Checkboxes: Mejores para selecciones múltiples, aceptación de términos, filtros, o cuando las opciones no implican un cambio de estado inmediato.

• Percepción del usuario: Los switches sugieren que el cambio tendrá efecto inmediato, mientras que los checkboxes suelen asociarse con selecciones que se procesarán al enviar el formulario.

Los switches de Bootstrap proporcionan una interfaz moderna y intuitiva para controles binarios, mejorando la experiencia del usuario mediante una comunicación visual clara del estado actual y la acción esperada.