Select

El Select permite elegir una o varias opciones de una lista desplegable. Tiene dos implementaciones con la misma forma de campo: Custom (botón + panel de opciones) y Nativo (<select> HTML).

Propiedades y configuraciones

Cuando usarlo

Úsalo cuando la persona deba elegir entre una lista larga de opciones conocidas y excluyentes, como región, comuna, país, institución de salud o sucursal de atención. Usa la versión Múltiple cuando pueda elegir varias opciones de esa lista.

Si hay pocas opciones, usa Radio Button o Checkbox: quedan todas a la vista sin abrir nada. Si la respuesta no se puede anticipar, usa Text field. Para navegar o ejecutar acciones, usa Link, Button o un menú — no un Select.

Buenas prácticas

Recomendado: Resérvalo para listas largas; usa Radio Button cuando son pocas

El Select ahorra espacio cuando hay muchas opciones. Con dos o tres alternativas, un grupo de Radio Button las muestra todas a la vista.

Recomendado: Ordena las opciones de forma predecible

Usa orden alfabético, o un orden natural cuando existe, para que la persona encuentre su opción sin leer toda la lista.

Recomendado: Usa valores predeterminados solo cuando tengan sentido

Preselecciona una opción si existe una razón clara y permite cambiarla fácilmente. Si la elección requiere una decisión consciente, deja el campo sin seleccionar.

Recomendado: Usa la versión múltiple cuando se pueden elegir varias

Si la persona puede elegir más de una opción de una lista larga, usa el Select múltiple: cada elección queda visible como Chip.

Malas prácticas

No recomendado: No lo uses para dos o tres opciones

Esconder “Sí / No” detrás de un desplegable agrega un clic y oculta las alternativas. Un grupo de Radio Button es más rápido y claro.

No recomendado: No uses opciones largas que se recortan

Un texto extenso se corta en la caja y la persona no puede confirmar qué eligió. Escribe opciones breves y deja el detalle en la descripción.

No recomendado: No lo uses para navegar ni ejecutar acciones

Una opción que lleva a otra página o cierra la sesión rompe lo que se espera de un campo de formulario. Las acciones van en botones o menús.

No recomendado: No bloquees un Select dependiente sin explicarlo

Un Select deshabilitado sin mensaje deja a la persona sin saber qué hacer. Indica en la ayuda qué debe completar primero.

Recomendaciones de accesibilidad

Prefiere el Select nativo cuando no necesites múltiple
El <select> nativo usa el selector del sistema operativo, que en móvil y con lectores de pantalla es el más conocido y robusto. Reserva el Custom para la selección múltiple con chips o cuando el diseño lo requiera.

Mantén el label vinculado al control
En Nativo, usa <label for> hacia el <select>. En Custom, el trigger se nombra con aria-labelledby (label + propio botón) para que se anuncie la pregunta y el valor actual; no quites ninguno de los dos id.

Nombra el panel y expón la selección
El panel Custom es un role="listbox" etiquetado por el label, y cada opción un role="option" con aria-selected. En múltiple, conserva aria-multiselectable="true": los checkboxes del panel son decorativos (aria-hidden).

Conecta la ayuda y el error
Agrega aria-describedby hacia la descripción y la ayuda, y aria-invalid="true" en el control en estado error, para que el mensaje se lea al enfocar el campo.

No cambies de página ni de contexto al elegir
Seleccionar una opción no debe navegar, enviar el formulario ni mover el foco a otro lugar. La persona debe poder recorrer las opciones con el teclado sin efectos inesperados.

Explica los Selects deshabilitados
Un control disabled no recibe foco y su motivo no se anuncia. Si depende de otro campo, dilo en el texto de la ayuda.