Desplegable vs Select vs Combobox
Un menú desplegable ejecuta acciones. Un select elige de una lista fija. Un combobox también te deja escribir o buscar.
Usa un menú para acciones. Usa un selector para una lista fija corta. Usa un cuadro combinado para una lista larga o buscable.
Ver lo que hace cada patrón
Prueba cada ejemplo. Luego lea sobre el trabajo para el que fue hecho.
Menú desplegable y menú contextual — Paquete de aprendizaje
Este paquete de aprendizaje compara menús según cómo se abren. Un desplegable se abre desde un control. Un menú contextual pertenece a un objeto y a menudo se abre en el puntero. El paquete no es un término estándar único de menú.
DropdownMenu / ContextMenuEl botón Más abre acciones generales. Hacer clic derecho en un archivo abre acciones solo para ese archivo.
- Úsalo cuando
- Elige un menú cuyo disparador y objeto encajen con la tarea. Luego crea su comportamiento de teclado.
- No lo uses cuando
- Nunca pongas campos de formulario o la navegación principal del sitio dentro de un menú de comandos.
- Nombre usado en código
DropdownMenu / ContextMenu
Seleccionar
Un select abre una lista fija y te deja elegir un solo valor.
Un campo de país muestra una lista fija y rechaza valores que no estén en ella.
- Úsalo cuando
- Úsalo cuando la lista sea fija, no demasiado larga y la página tenga poco espacio.
- No lo uses cuando
- Nunca lo uses para una lista larga que la gente necesita buscar. Usa un combobox en su lugar.
- Nombre usado en código
<select> / role="listbox"
Cuadro combinado editable
Un cuadro combinado editable es un campo de texto unido a una lista que se filtra mientras escribes.
Escribe “Tai” para mostrar Taipei y Tainan. Luego usa las teclas de flecha para elegir.
- Úsalo cuando
- Úsalo para listas largas y buscables, autocompletado o opciones que permitan una respuesta personalizada.
- No lo uses cuando
- Nunca llames a un menú simple o a un select nativo una combobox porque funcionan de manera diferente.
- Nombre usado en código
role="combobox" + aria-controls
Comparación rápida
| Patrón de UI | Mejor para | No para | Nombre usado en código |
|---|---|---|---|
| Menú desplegable y menú contextual — Paquete de aprendizajeDropdown & Context Menu — Learning Bundle | Elige un menú cuyo disparador y objeto encajen con la tarea. Luego crea su comportamiento de teclado. | Nunca pongas campos de formulario o la navegación principal del sitio dentro de un menú de comandos. | DropdownMenu / ContextMenu |
| SeleccionarSelect | Úsalo cuando la lista sea fija, no demasiado larga y la página tenga poco espacio. | Nunca lo uses para una lista larga que la gente necesita buscar. Usa un combobox en su lugar. | <select> / role="listbox" |
| Cuadro combinado editableEditable Combobox | Úsalo para listas largas y buscables, autocompletado o opciones que permitan una respuesta personalizada. | Nunca llames a un menú simple o a un select nativo una combobox porque funcionan de manera diferente. | role="combobox" + aria-controls |
Antes de lanzarlo
- 01
Escribe lo que la persona necesita hacer.
- 02
Probar el teclado, enfoque, tacto, zoom, carga, estados vacíos y de error.
- 03
Asegurarse de que las personas puedan obtener la misma información sin pasar el cursor o movimiento.
- 04
Probar con contenido real en pantallas pequeñas y grandes.
Petición de comparación que puedes copiar
Copia esto cuando tu equipo necesite ayuda para elegir entre los patrones.
Elige el mejor patrón de Menú desplegable y menú contextual — Paquete de aprendizaje (Dropdown & Context Menu — Learning Bundle), Seleccionar (Select), Cuadro combinado editable (Editable Combobox) para nuestro flujo de usuario real. Usa esta regla: Un menú desplegable ejecuta acciones. Un select elige de una lista fija. Un combobox también te deja escribir o buscar. Anota la tarea, la cantidad de contenido y el costo de detener el flujo. Comprueba el teclado, toque, carga, errores y movimiento reducido. Explica tu elección y luego crea la versión accesible más pequeña usando el sistema de diseño del proyecto.