Tema 18 · Selects, Checks y Radios

Menús Select, Casillas, Radios y Switches

Aprende a estilizar listas desplegables con .form-select, casillas de verificación, botones de opción excluyente y elegantes interruptores deslizantes con .form-switch.

Controles de Entrada (Form Controls) Grupos de Entrada (Input Groups) y Floating Labels

Menús Desplegables de Selección (.form-select)

Para los elementos <select>, Bootstrap 5 provee la clase .form-select en lugar de .form-control. Aplica una flecha personalizada en formato SVG y respeta las dimensiones responsivas. 

<select class="form-select" aria-label="Seleccionar curso">
  <option selected>Elige una ruta de aprendizaje...</option>
  <option value="1">Ruta Frontend (HTML/CSS/JS)</option>
  <option value="2">Ruta Backend (PHP/MySQL)</option>
</select>

Casillas (Checks) y Botones de Radio (Radios)

Para sustituir las casillas cuadradas nativas del sistema operativo por controles modernos y coherentes en todos los navegadores, usamos .form-check, .form-check-input y .form-check-label: 

<!-- Casilla de verificación -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkTerminos">
  <label class="form-check-label" for="checkTerminos">Acepto los términos de servicio</label>
</div>

<!-- Radio excluyente -->
<div class="form-check">
  <input class="form-check-input" type="radio" name="modalidad" id="radio1" checked>
  <label class="form-check-label" for="radio1">Modalidad Online</label>
</div>

Interruptores Deslizantes (.form-switch)

Un switch es simplemente una casilla de verificación con la clase contenedora adicional .form-switch. Al activarse, la palanca se desplaza con una suave animación: 

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="switchTema">
  <label class="form-check-label" for="switchTema">Activar Notificaciones por Correo</label>
</div>

⚡ Panel de Preferencias con Selects, Checks y Switches

Interactúa con el menú desplegable, las opciones de radio y los interruptores deslizantes animados de Bootstrap 5:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Checks, Radios y Switches Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">

  <div class="container" style="max-width: 580px;">
    <div class="card shadow-sm border-0 rounded-4 p-4 bg-white">
      <h4 class="fw-bold text-dark mb-3">Configuración de Preferencias</h4>

      <!-- 1. Menú Select Estilizado -->
      <div class="mb-3">
        <label for="selectNivel" class="form-label fw-semibold">Nivel de Conocimiento Técnico</label>
        <select class="form-select" id="selectNivel">
          <option selected>Selecciona tu nivel actual...</option>
          <option value="1">Principiante (Sin experiencia previa)</option>
          <option value="2">Intermedio (HTML y CSS básico)</option>
          <option value="3">Avanzado (Desarrollador en ejercicio)</option>
        </select>
      </div>

      <!-- 2. Radios Excluyentes -->
      <label class="form-label fw-semibold mb-2 d-block">Modalidad de Tutoría</label>
      <div class="mb-3">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="tutoria" id="radioAuto" checked>
          <label class="form-check-label" for="radioAuto">Aprendizaje Autónomo a mi propio ritmo</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="tutoria" id="radioAI">
          <label class="form-check-label" for="radioAI">Asistencia personalizada con Sócrates AI</label>
        </div>
      </div>

      <!-- 3. Switches Deslizantes -->
      <label class="form-label fw-semibold mb-2 d-block">Notificaciones del Campus</label>
      <div class="mb-4">
        <div class="form-check form-switch mb-2">
          <input class="form-check-input" type="checkbox" role="switch" id="switchEmail" checked>
          <label class="form-check-label" for="switchEmail">Avisos de nuevas lecciones por correo</label>
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="switchSonido">
          <label class="form-check-label" for="switchSonido">Efectos sonoros al completar ejercicios</label>
        </div>
      </div>

      <button class="btn btn-primary w-100 rounded-pill fw-semibold shadow-sm" onclick="alert('¡Preferencias guardadas!')">
        Guardar Ajustes
      </button>
    </div>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de Bootstrap 5.3 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.