Selector

Componentes

Selector

El componente de selección recopila información proporcionada por el usuario de una lista de opciones. Las selecciones generalmente se usan en formularios donde un usuario envía datos y elige una opción o varias de la lista de una lista.

Vista Previa

Figma

Usos

Cuándo usar

Dentro de un formulario donde los usuarios seleccionan de una lista de opciones y envían datos.

Cuándo no usar

Utilizamos el selector base cuando solo se quiere seleccionar una opción del listado de opciones del dropdown.

Utilizamos el selector múltiple base cuando se pueden seleccionar varias opciones del listado del dropdown

El modo de solo lectura los utilizamos para indicar un campo entre otros que no se puede editar su información. No deben de confundirse con el modo disable.

os campos en modo disable los utilizamos cuando hay una acción por parte del usuario para poder activarlo, sin embargo los campos de solo lectura no se podrían editar.

Buenas prácticas

Para reducir la carga cognitiva del usuario se recomienda marcar con un asterísco los campos obligatorios. En la parte superior se debe de mencionar que los asteríscos indican campos obligatorios.

En los textos de ayuda en el detalle proporcionar un ejemplo. Utilizar solo cuando se requiera y no abusar.

Incluir una etiqueta concisa.

Comportamiento

Tipos de select

Selección única Basic

isualización del comportamiento del selector selección única tipo detail

Selección única Detail

Selección única-Button

Visualización del comportamiento del selector multiselección tipo básico

Multiselección-Basic

Visualización del comportamiento del selector multiselección tipo detail

Multiselección-Detail

Multiselección-Button

Tipos de label

Visualización del comportamiento del selector con label requerida

Requerido

Visualización del comportamiento del selector con label no requerida

No Requerido

Estados

Placeholder

Filled

Focus

Disabled

Error

Success

Dropdown

Only text-Basic

Only text-Button

Options-Basic

Options-Buttons

Text + icon-Basic

Text + icon-Button

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

El elemento que sirve de input y muestra el valor del combobox tiene rol="combobox".

El desplegable tiene rol="listbox".

El elemento con rol="combobox" tiene aria-haspopup="listbox".

Cuando el elemento desplegable no es visible, el elemento con rol combobox tiene aria-expanded establecido a false. Cuando el elemento emergente es visible, aria-expanded tiene el valor true. Ten en cuenta que los elementos con rol combobox tienen un valor por defecto para aria-expanded de false.

El select tiene una etiqueta proporcionada por aria-label.

Cuando es seleccionado un valor, la opción que contiene ese valor tiene aria-selected establecido en true.