Dropdown
Un dropdown permite elegir una opción de una lista cerrada de valores. Mantiene el formulario compacto y oculta opciones hasta que se necesitan.
Uso
Cuándo usar dropdown
- Las opciones son un conjunto cerrado y conocido.
- El espacio en pantalla obliga a ocultar la lista hasta que se necesita.
- La persona reconoce el valor cuando lo ve, no necesita escribirlo.
Dropdown vs combobox vs radio
- Si las opciones son pocas y caben visibles: radio group.
- Si la lista es larga y escribir acelera la selección: combobox.
- Si la lista es media o larga y la selección es ocasional: dropdown.
- Si la selección puede ser múltiple: usa combobox con multi-select, no este componente.
Variantes
Clearable
Activa clearable en filtros y campos opcionales donde la persona pueda querer descartar la selección sin abrir la lista. Requiere controlar el value para poder limpiarlo desde fuera.
Estados
Deshabilitado
Usa disabled cuando la opción no está disponible en el contexto actual pero podría volver a estarlo. Si nunca aplica, no lo muestres.
Error
- Comunica el error con un mensaje claro debajo del control.
- Conecta el mensaje al dropdown con aria-describedby.
- Mantén la última selección válida visible cuando sea posible.
Accesibilidad
Label y teclado
- Todo dropdown debe tener un label visible o aria-label.
- Flecha abajo abre la lista y navega entre opciones.
- Enter selecciona y cierra; Esc cierra sin cambios.
- Empezar a escribir hace autocompletado de búsqueda dentro de la lista (Radix lo provee por defecto).
Contenido
Etiquetas y opciones
- El label nombra el dato que se elige, no la acción de elegir.
- El placeholder anticipa el tipo de valor esperado, no lo reemplaza.
- Ordena las opciones por relevancia o alfabéticamente, no por orden de creación.
- Mantén nombres cortos: si una opción necesita explicación, agrega una descripción aparte en lugar de alargar el label.