Selectores

Select básico y opciones simples

Los elementos select son componentes fundamentales en formularios que permiten a los usuarios elegir una opción de una lista desplegable predefinida. Bootstrap proporciona la clase .form-select para aplicar estilos consistentes y modernos a estos elementos, manteniendo la misma apariencia visual que el resto de controles de formulario.

La estructura básica de un selector en Bootstrap sigue un patrón simple y directo:

<select class="form-select">
  <option selected>Elige una opción</option>
  <option value="1">Opción uno</option>
  <option value="2">Opción dos</option>
  <option value="3">Opción tres</option>
</select>

La clase .form-select transforma el aspecto nativo del navegador aplicando los estilos predefinidos de Bootstrap. Esto incluye bordes consistentes, colores apropiados, tipografía uniforme y el icono de flecha desplegable característico que se alinea con el resto de elementos del sistema de diseño.

Estructura de opciones

Cada opción individual se define mediante el elemento <option>, que puede contener diferentes atributos para controlar su comportamiento:

<select class="form-select">
  <option value="">Selecciona tu país</option>
  <option value="es">España</option>
  <option value="fr">Francia</option>
  <option value="it">Italia</option>
  <option value="pt">Portugal</option>
</select>

El atributo value define el valor técnico que se enviará cuando se procese el formulario, mientras que el texto interno de la etiqueta representa lo que ve el usuario. Esta separación permite mantener códigos internos mientras se muestran nombres descriptivos.

Para establecer una opción preseleccionada, se utiliza el atributo selected:

<select class="form-select">
  <option value="">Rango de edad</option>
  <option value="18-25">18-25 años</option>
  <option value="26-35" selected>26-35 años</option>
  <option value="36-50">36-50 años</option>
  <option value="51+">Más de 50 años</option>
</select>

Estados básicos del selector

Los selectores pueden presentar diferentes estados visuales según las necesidades del formulario. El estado deshabilitado se aplica mediante el atributo disabled:

<select class="form-select" disabled>
  <option>Este selector está deshabilitado</option>
  <option value="1">Opción uno</option>
  <option value="2">Opción dos</option>
</select>

También es posible deshabilitar opciones individuales dentro de un selector activo:

<select class="form-select">
  <option value="">Categoría de producto</option>
  <option value="electronics">Electrónicos</option>
  <option value="clothing">Ropa</option>
  <option value="books" disabled>Libros (agotado)</option>
  <option value="home">Hogar</option>
</select>

Casos de uso prácticos

Los selectores básicos resultan especialmente útiles en formularios de contacto donde se necesita clasificar consultas:

<label for="subject" class="form-label">Asunto de la consulta</label>
<select class="form-select" id="subject">
  <option value="">Selecciona un tema</option>
  <option value="info">Información general</option>
  <option value="support">Soporte técnico</option>
  <option value="billing">Facturación</option>
  <option value="other">Otro tema</option>
</select>

En formularios de registro, los selectores proporcionan una manera eficiente de capturar información demográfica:

<label for="education" class="form-label">Nivel de estudios</label>
<select class="form-select" id="education">
  <option value="">Indica tu nivel</option>
  <option value="primary">Educación primaria</option>
  <option value="secondary">Educación secundaria</option>
  <option value="bachelor">Grado universitario</option>
  <option value="master">Máster</option>
  <option value="phd">Doctorado</option>
</select>

La integración con labels sigue las mismas prácticas que otros controles de formulario, utilizando el atributo for en la etiqueta que corresponde con el id del selector para mejorar la accesibilidad y la experiencia de usuario.

Select múltiple y grupos de opciones

Los selectores múltiples permiten a los usuarios elegir varias opciones simultáneamente, mientras que los grupos de opciones organizan elementos relacionados bajo categorías descriptivas. Ambas funcionalidades extienden las capacidades básicas del elemento select manteniendo la consistencia visual de Bootstrap.

Selectores múltiples

Un selector múltiple se crea añadiendo el atributo multiple al elemento select básico. Esta configuración transforma la interfaz de una lista desplegable a una lista expandida donde los usuarios pueden seleccionar múltiples elementos:

<label for="skills" class="form-label">Habilidades técnicas</label>
<select class="form-select" id="skills" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="php">PHP</option>
  <option value="python">Python</option>
  <option value="java">Java</option>
</select>

El comportamiento nativo del navegador permite seleccionar múltiples opciones manteniendo presionada la tecla Ctrl (Windows/Linux) o Cmd (Mac) mientras se hace clic en diferentes elementos. Para selecciones de rango, se puede usar Shift junto con los clics.

Control de altura en selectores múltiples

Bootstrap proporciona control sobre el número de opciones visibles mediante el atributo size, que especifica cuántas filas mostrar sin necesidad de hacer scroll:

<label for="countries" class="form-label">Países de interés</label>
<select class="form-select" id="countries" multiple size="4">
  <option value="spain">España</option>
  <option value="france">Francia</option>
  <option value="italy">Italia</option>
  <option value="germany">Alemania</option>
  <option value="uk">Reino Unido</option>
  <option value="netherlands">Países Bajos</option>
  <option value="portugal">Portugal</option>
</select>

Esta configuración muestra cuatro opciones simultáneamente y añade automáticamente una barra de scroll vertical cuando hay más elementos disponibles, manteniendo un diseño compacto y manejable.

Grupos de opciones con optgroup

El elemento <optgroup> permite organizar opciones relacionadas bajo etiquetas descriptivas, mejorando la navegación y comprensión del contenido. Cada grupo se identifica mediante el atributo label:

<label for="product-category" class="form-label">Categoría de producto</label>
<select class="form-select" id="product-category">
  <option value="">Selecciona una categoría</option>
  <optgroup label="Tecnología">
    <option value="smartphones">Smartphones</option>
    <option value="laptops">Portátiles</option>
    <option value="tablets">Tablets</option>
    <option value="accessories">Accesorios</option>
  </optgroup>
  <optgroup label="Hogar">
    <option value="furniture">Muebles</option>
    <option value="decoration">Decoración</option>
    <option value="kitchen">Cocina</option>
    <option value="garden">Jardín</option>
  </optgroup>
  <optgroup label="Ropa">
    <option value="men">Hombre</option>
    <option value="women">Mujer</option>
    <option value="children">Infantil</option>
    <option value="accessories-fashion">Complementos</option>
  </optgroup>
</select>

Los grupos de opciones se renderizan visualmente con la etiqueta en un estilo diferenciado y las opciones indentadas, creando una jerarquía clara que facilita la navegación en listas extensas.

Combinación de múltiples selecciones y grupos

Es posible combinar ambas funcionalidades para crear selectores múltiples organizados en categorías, especialmente útil en formularios complejos de preferencias o configuración:

<label for="interests" class="form-label">Áreas de interés</label>
<select class="form-select" id="interests" multiple size="8">
  <optgroup label="Desarrollo Web">
    <option value="frontend">Frontend</option>
    <option value="backend">Backend</option>
    <option value="fullstack">Full Stack</option>
    <option value="ui-ux">UI/UX Design</option>
  </optgroup>
  <optgroup label="Datos y Analytics">
    <option value="data-science">Data Science</option>
    <option value="machine-learning">Machine Learning</option>
    <option value="business-intelligence">Business Intelligence</option>
  </optgroup>
  <optgroup label="Infraestructura">
    <option value="devops">DevOps</option>
    <option value="cloud">Cloud Computing</option>
    <option value="security">Ciberseguridad</option>
  </optgroup>
</select>

Estados avanzados en grupos

Los grupos de opciones también pueden aplicar estados especiales. Es posible deshabilitar un grupo completo añadiendo el atributo disabled al optgroup:

<select class="form-select">
  <option value="">Selecciona un curso</option>
  <optgroup label="Cursos Disponibles">
    <option value="html-css">HTML y CSS Básico</option>
    <option value="javascript">JavaScript Intermedio</option>
    <option value="react">React Avanzado</option>
  </optgroup>
  <optgroup label="Próximamente" disabled>
    <option value="vue">Vue.js</option>
    <option value="angular">Angular</option>
    <option value="nodejs">Node.js</option>
  </optgroup>
</select>

Casos prácticos avanzados

Un ejemplo práctico común es un selector de ubicación geográfica que combina países agrupados por continentes:

<label for="location" class="form-label">Ubicación preferida</label>
<select class="form-select" id="location">
  <option value="">Elige tu ubicación</option>
  <optgroup label="Europa">
    <option value="madrid">Madrid, España</option>
    <option value="paris">París, Francia</option>
    <option value="rome">Roma, Italia</option>
    <option value="berlin">Berlín, Alemania</option>
  </optgroup>
  <optgroup label="América">
    <option value="newyork">Nueva York, EE.UU.</option>
    <option value="toronto">Toronto, Canadá</option>
    <option value="mexico-city">Ciudad de México, México</option>
    <option value="buenos-aires">Buenos Aires, Argentina</option>
  </optgroup>
  <optgroup label="Asia">
    <option value="tokyo">Tokio, Japón</option>
    <option value="singapore">Singapur</option>
    <option value="seoul">Seúl, Corea del Sur</option>
  </optgroup>
</select>

En formularios de configuración de usuario, los selectores múltiples con grupos resultan especialmente efectivos para gestionar preferencias complejas:

<label for="notifications" class="form-label">Preferencias de notificaciones</label>
<select class="form-select" id="notifications" multiple size="6">
  <optgroup label="Email">
    <option value="email-news">Noticias y actualizaciones</option>
    <option value="email-promo">Promociones especiales</option>
    <option value="email-security">Alertas de seguridad</option>
  </optgroup>
  <optgroup label="Aplicación móvil">
    <option value="push-messages">Mensajes directos</option>
    <option value="push-reminders">Recordatorios</option>
    <option value="push-updates">Actualizaciones de estado</option>
  </optgroup>
</select>

La integración semántica con labels y la estructura accesible se mantiene idéntica a los selectores básicos, asegurando que las tecnologías de asistencia interpreten correctamente tanto los grupos como las selecciones múltiples.

Estados y personalización de selectores

Los selectores de Bootstrap ofrecen múltiples opciones de personalización visual que permiten adaptar su apariencia a diferentes contextos y necesidades de diseño. Estas variaciones mantienen la consistencia del sistema mientras proporcionan flexibilidad para crear interfaces más refinadas.

Variaciones de tamaño

Bootstrap proporciona tres tamaños predefinidos para los selectores mediante clases específicas que siguen el mismo patrón utilizado en otros controles de formulario:

<!-- Selector pequeño -->
<select class="form-select form-select-sm">
  <option selected>Selector pequeño</option>
  <option value="1">Opción compacta</option>
  <option value="2">Otra opción</option>
</select>

<!-- Selector estándar (sin clase adicional) -->
<select class="form-select">
  <option selected>Selector estándar</option>
  <option value="1">Opción normal</option>
  <option value="2">Otra opción</option>
</select>

<!-- Selector grande -->
<select class="form-select form-select-lg">
  <option selected>Selector grande</option>
  <option value="1">Opción destacada</option>
  <option value="2">Otra opción</option>
</select>

La clase .form-select-sm crea selectores compactos ideales para interfaces densas en información, mientras que .form-select-lg genera controles prominentes apropiados para elementos principales o llamadas a la acción importantes.

Integración con el sistema grid

Los selectores se adaptan naturalmente al sistema de columnas de Bootstrap, permitiendo crear layouts responsive complejos:

<div class="row">
  <div class="col-md-6">
    <label for="priority" class="form-label">Prioridad</label>
    <select class="form-select form-select-sm" id="priority">
      <option value="low">Baja</option>
      <option value="medium">Media</option>
      <option value="high">Alta</option>
    </select>
  </div>
  <div class="col-md-6">
    <label for="department" class="form-label">Departamento</label>
    <select class="form-select form-select-sm" id="department">
      <option value="sales">Ventas</option>
      <option value="support">Soporte</option>
      <option value="development">Desarrollo</option>
    </select>
  </div>
</div>

Personalización con utilidades de color

Los selectores pueden personalizarse visualmente combinando las clases base con las utilidades de Bootstrap para crear variaciones temáticas:

<!-- Selector con borde personalizado -->
<select class="form-select border-primary">
  <option selected>Selector con borde azul</option>
  <option value="1">Opción destacada</option>
  <option value="2">Otra opción</option>
</select>

<!-- Selector con fondo sutil -->
<select class="form-select bg-light">
  <option selected>Selector con fondo claro</option>
  <option value="1">Opción suave</option>
  <option value="2">Otra opción</option>
</select>

Estados de validación avanzados

Los selectores heredan los estados de validación que se aplicarán en lecciones posteriores, pero pueden anticiparse visualmente mediante clases específicas:

<!-- Selector con estado válido -->
<select class="form-select is-valid">
  <option value="">Selección correcta</option>
  <option value="valid-option" selected>Opción válida</option>
  <option value="another">Otra opción</option>
</select>

<!-- Selector con estado inválido -->
<select class="form-select is-invalid">
  <option value="">Selección requerida</option>
  <option value="1">Opción uno</option>
  <option value="2">Opción dos</option>
</select>

Combinación con elementos floating labels

Los selectores se integran perfectamente con el sistema de floating labels de Bootstrap para crear interfaces más modernas:

<div class="form-floating">
  <select class="form-select" id="floatingSelect">
    <option selected>Selecciona una opción</option>
    <option value="1">Opción uno</option>
    <option value="2">Opción dos</option>
    <option value="3">Opción tres</option>
  </select>
  <label for="floatingSelect">Etiqueta flotante</label>
</div>

Personalización responsiva

Las variaciones de tamaño pueden aplicarse condicionalmente según el breakpoint utilizando las utilidades responsive de Bootstrap:

<select class="form-select form-select-sm form-select-md-lg">
  <option selected>Selector adaptativo</option>
  <option value="1">Pequeño en móvil, grande en tablet+</option>
  <option value="2">Responde al tamaño de pantalla</option>
</select>

Casos prácticos de personalización

En formularios de configuración avanzada, la personalización permite crear jerarquías visuales claras:

<!-- Selector principal prominente -->
<div class="mb-4">
  <label for="main-config" class="form-label fs-5 fw-bold">Configuración principal</label>
  <select class="form-select form-select-lg border-primary" id="main-config">
    <option value="basic">Configuración básica</option>
    <option value="advanced">Configuración avanzada</option>
    <option value="custom">Personalizada</option>
  </select>
</div>

<!-- Selectores secundarios compactos -->
<div class="row">
  <div class="col-6">
    <label for="theme" class="form-label">Tema</label>
    <select class="form-select form-select-sm bg-light" id="theme">
      <option value="light">Claro</option>
      <option value="dark">Oscuro</option>
      <option value="auto">Automático</option>
    </select>
  </div>
  <div class="col-6">
    <label for="language" class="form-label">Idioma</label>
    <select class="form-select form-select-sm bg-light" id="language">
      <option value="es">Español</option>
      <option value="en">English</option>
      <option value="fr">Français</option>
    </select>
  </div>
</div>

Integración con componentes de entrada

Los selectores personalizados pueden combinarse con input groups para crear controles híbridos:

<div class="input-group">
  <span class="input-group-text">País:</span>
  <select class="form-select">
    <option value="es">España</option>
    <option value="fr">Francia</option>
    <option value="it">Italia</option>
  </select>
  <span class="input-group-text">Región:</span>
  <select class="form-select">
    <option value="north">Norte</option>
    <option value="south">Sur</option>
    <option value="center">Centro</option>
  </select>
</div>

Accesibilidad en selectores personalizados

La personalización visual debe mantener siempre los estándares de accesibilidad. Los estados de focus y las relaciones semánticas se preservan automáticamente:

<div class="mb-3">
  <label for="accessible-select" class="form-label">
    Selector accesible 
    <span class="text-danger">*</span>
  </label>
  <select class="form-select form-select-lg border-info" 
          id="accessible-select" 
          required 
          aria-describedby="select-help">
    <option value="">Selecciona una opción</option>
    <option value="option1">Primera opción</option>
    <option value="option2">Segunda opción</option>
  </select>
  <div id="select-help" class="form-text">
    Este campo es obligatorio para continuar
  </div>
</div>

La flexibilidad de personalización de Bootstrap permite adaptar los selectores a prácticamente cualquier necesidad de diseño manteniendo la funcionalidad, accesibilidad y consistencia visual del sistema de componentes.