DESY

Sistema de Diseño del Gobierno de Aragón.

Selector

Es un elemento de formulario que permite seleccionar una opción de entre un listado de varias. Cuando está plegado, muestra la opción actualmente seleccionada y cuando está expandido muestra una lista desplegable de opciones predefinidas.

Buenas práticas

  • Usar si hay más de 5 opciones a listar. Para menos opciones se recomienda usar checkboxes o radio buttons.
  • La etiqueta o label debe ser clara y concisa.
  • Siempre que sea posible, seleccionar una opción por defecto. Si no hay alguna opción que pueda ser seleccionada o si es importante que la persona vea las opciones que se plantean, usar por defecto una opción null con un texto explicativo, por ejemplo “seleccionar una opción…” o “Indicar tipo…”. Por lo general, no mostrar el desplegable vacío.
  • Ordenar las opciones de manera que tenga sentido para el usuario. Por defecto se recomienda ordenarlas por orden alfabético, pero hay algunos campos que es más apropiado ordenarlos según la frecuencia de uso, tipo de acciones o cualquier otro criterio.
  • Las opciones se pueden agrupar en caso de que se considere necesario.
  • En general no se recomienda el uso de iconos en este campo.

Diferencias entre Selector, Desplegable, Listado en caja, Menú de navegación y Barra de menús

Existen varios componentes que tienen una apariencia y funcionamiento similar, aunque deben usarse uno u otro dependiendo de la finalidad y función final que tenga el componente.

Desplegable

Listado en caja

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Barra de menús

Selector

Se usa específicamente en formularios, tienen una apariencia y tamaño alineado con los inputs.

Ver código

Desplegable

Es un componente que despliega un contenedor genérico en el que puede incluirse cualquier otro componente.

Ver código

Listado en caja

Se usa para hacer un listado de opciones.

Ver código

Menú de navegación

Se usan específicamente para navegar en la aplicación, puede tener varias apariencias según el contexto.

Ver código

Barra de menús

Genera cambios en otro sitio de la página, pero no navega a otro sitio diferente. Se pueden seleccionar múltiples opciones y agruparlas de distintas maneras. Por ejemplo para filtros.

Ver código