Componentes de Bootstrap

Selectores

La lista desplegable de un formulario, simple o múltiple. El control nativo del tema; un plugin nunca construye el suyo.

Un selector deja elegir una opción (o varias) de una lista corta y conocida. Es el selector propio del tema: comportamiento nativo, con la altura, el borde y la flecha de los demás campos.

Cuándo usarlo

Úsalo

Un selector para de 4 a unas 15 opciones que el usuario ya conoce.
Una etiqueta visible, enlazada con for e id.
Una primera opción que diga qué hacer (“Elige…”) cuando no hay un valor por defecto.
multiple con size solo cuando el usuario debe ver las opciones a la vez.
Moodle ajusta un selector a su contenido; añade w-100 donde deba llenar la fila.

No

Usar un selector para dos opciones; usa radios o un interruptor.
Usarlo para una lista larga o con búsqueda; el autocompletado de Moodle es el componente para eso.
Dar estilo a las opciones; las dibuja el navegador.
Cambiar la flecha o la altura en un plugin.

Anatomía

Un selector tiene una etiqueta, el control con la opción elegida y una flecha, y la lista que abre el navegador. Las mismas reglas de pista y mensaje que un campo de texto.

Variantes y estados

Simple, pequeño y múltiple

La lista que se abre

El navegador dibuja por su cuenta la lista de un selector y una página no puede darle estilo. En este sistema un selector abre en su lugar un menú del sistema de diseño: el mismo que tiene un desplegable, con los grupos como encabezados, las opciones desactivadas atenuadas y la elegida marcada. El selector conserva su valor y sus eventos, así que el marcado de un plugin no cambia. Pruébalo también con el teclado (flechas, Inicio, Fin, una letra, Intro, Escape).

El menú de un selector

Course category

Open it: the list is a menu of the design system, with the groups as headers and the chosen option marked.

Tamaños

Pequeño, normal y grande

Usa el tamaño normal. El pequeño es para sitios densos (una barra de filtros sobre una tabla, las filas por página de un paginador); el grande, solo para un campo principal único de una página.

Varios valores como etiquetas

Un select con el atributo multiple se dibuja como un campo de etiquetas: lo elegido se muestra como piezas que se quitan una a una, y las opciones se abren en el menú del sistema de diseño, con una marca, que sigue abierto mientras la persona elige. El select de debajo conserva sus valores y sus eventos, así que el marcado de un plugin no cambia. El mismo campo admite también texto libre (etiquetas que aún no existen); mira la página “Etiquetas”.

Un select con varios valores, etiquetas libres y un campo vacío

Combinaciones

Combinación	Para qué usarla
Selector × pocas opciones	De 4 a unas 15 opciones que el usuario ya conoce. Menos de 4: radios. Más de 15, o con búsqueda: el autocompletado de Moodle.
Selector + optgroup	Agrupa las opciones con `optgroup`; el menú muestra cada grupo como un encabezado.
Selector + grupo de entrada	Un selector pegado a un botón («Ocultar
Ancho	Moodle ajusta un selector a su contenido. Añade `w-100` donde deba llenar la fila.

Qué cambia Didactika y por qué

Qué cambiamos	Por qué ayuda
La lista que se abre es un menú del sistema de diseño	La lista nativa no se puede estilar, así que cada navegador mostraba una lista distinta y simple que no encajaba con el resto de la página. Un menú se ve igual en todas partes y muestra la opción elegida.
La flecha tiene su propio espacio a la derecha	Las opciones largas nunca pasan por debajo de la flecha, en ningún tamaño.
Misma altura, borde y foco que un campo de texto	Un selector junto a un campo parece su hermano, no otro componente.

Clases

Clase	Qué hace
`form-selectcustom-select`	El selector
`form-select-sm`, `form-select-lgcustom-select-sm`, `custom-select-lg`	Más pequeño y más grande
`form-label`	Etiqueta sobre el selector
`dd-select-menu`	El menú que abre un selector (Didactika). Lo construye el sitio; los plugins no lo escriben

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. La flecha es una imagen de fondo que el tema puede cambiar.

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. La clase es custom-select.

Accesibilidad

Una etiqueta en cada selector.
No uses onchange para navegar o enviar; da un botón.
El comportamiento nativo del teclado (flechas, escribir para buscar) es gratis: conserva el elemento nativo.
Un mensaje de error se enlaza con aria-describedby.