El componente menú desplegable presenta a los usuarios un conjunto de opciones de entre las que deben seleccionar. Las listas desplegables revelan progresivamente las opciones, lo que evita que los usuarios vean demasiada información a la vez. También se pueden utilizar para agrupar información. Las listas desplegables siempre son compatibles con un campo, un rótulo o un título que se coloca antes del control.
Para obtener una guía detallada sobre cuándo utilizar este componente, examine el siguiente árbol de decisiones del componente de la interfaz de usuario.
La lista de selecciones tiene una complejidad tal que amerita la búsqueda y el filtrado. En su lugar, utilice el cuadro combinado.
Hay una pequeña cantidad de opciones (5 o menos) entre las que los usuarios pueden elegir. Utilice el grupo de selección para pequeños conjuntos de elementos mutuamente excluyentes.
Cuando utilice el menú desplegable para ordenar, considere organizar las opciones en orden. Por ejemplo:
De la opción más común a la menos común.
De la operación más simple a la más compleja.
De la opción menos riesgosa a la más riesgosa.
La primera opción aparecería en la parte superior de la lista.
Evite organizar la lista de opciones alfabéticamente, a menos que tenga sentido para su caso de uso. A menudo está bien organizar alfabéticamente las listas de países y otros problemas de elementos conocidos. Sin embargo, debe asegurarse de que los usuarios conozcan inequívocamente el nombre de su selección.
En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
Coloque el rótulo del menú desplegable fuera del campo para que siempre esté visible. Un menú desplegable sin rótulo no es accesible.
No reemplace los rótulos de campo por texto de marcador de posición en el campo. Esto perjudica la facilidad de uso y tiene muchas consecuencias negativas.
Coloque un rótulo permanente fuera del campo.
No utilice texto de marcador de posición como sustituto del rótulo de campo.
Limite cada opción del menú desplegable a una línea de texto. Si el texto es demasiado largo para una línea, puede agregar puntos suspensivos (...) para el desbordamiento del contenido y acompañarlo con una descripción emergente basada en navegador que muestre el string completo. Sin embargo, se recomienda evitar el truncamiento si fuera posible.
Los elementos del menú deben ser concisos.
No use elementos de menú largos que requieran truncamiento.
Use el texto de ayuda para mostrar el contexto y comunicar qué opción seleccionar o cómo hacerlo. Estos son algunos ejemplos de lo que podría incluir en el texto de ayuda:
Una descripción general de las opciones del menú desplegable.
Sugerencias que ayuden al usuario a elegir la selección correcta.
Más contexto de por qué un usuario deba elegir una opción.
Utilice el texto de ayuda solo para la información pertinente. No use texto de ayuda que simplemente repita la misma información que aparece en el rótulo.
En el texto de ayuda, use mayúsculas como se usan en las oraciones. Escriba 1 o 2 oraciones cortas y completas que terminen con un punto.
Utilice texto de ayuda para mostrar el contexto.
No use texto de ayuda que simplemente repita la misma información que aparece en el rótulo.
El texto del mensaje de error indica a un usuario cómo corregir el error. En el caso del menú desplegable, los errores a menudo están relacionados con algo que debe corregirse para la validación integrada. Por ejemplo, si alguien no selecciona un estado de empleo y se trata de un campo obligatorio, puede usar el texto de error para guiar al usuario a una solución: “Seleccione un estado de empleo”.
En el texto de error, use mayúsculas como se usan en las oraciones. Escriba 1 o 2 oraciones cortas y completas que terminen con un punto.
Use el texto de error para guiar al usuario y mostrarle una solución.
No escriba mensajes de error ambiguos ni deje a los usuarios pensando cómo resolver un problema.
Utilice un asterisco (*) para indicar los campos obligatorios. El asterisco precede al rótulo del campo. Esto ayuda a los usuarios a identificar fácilmente qué campos son obligatorios escaneando solo el carácter más a la izquierda del rótulo.
Además de marcar los campos obligatorios con un asterisco, se recomienda incluir instrucciones claras en la parte superior del formulario, como “Todos los campos marcados con un asterisco son obligatorios”, para garantizar que los usuarios comprendan el significado del asterisco.
Utilice un asterisco para indicar que un campo es obligatorio.
No use un asterisco para indicar algo que sea opcional.
La variante selección aparece sin valor (predeterminado), texto de marcador de posición o una entrada rellena.
Ilustración
Estado
Descripción
Sin valor (predeterminado)
Indica al usuario que no se ha seleccionado ningún valor y que no hay un marcador de posición.
Marcador de posición
Indica al usuario que no se ha seleccionado ningún valor. El marcador de posición aparece atenuado.
Entrada rellena
Indica al usuario que la entrada está completa con datos.
La selección también tiene estados interactivos para habilitado, en foco, deshabilitado, error, solo lectura y solo visualización.
Estado
Descripción
Habilitado
Indica al usuario que el elemento está habilitado para la interacción.
En foco
Indica al usuario qué elemento de la interfaz de usuario del sistema está el foco.
Deshabilitado
Indica al usuario que el valor de entrada no se puede cambiar debido a factores locales. Por ejemplo, una casilla de verificación sobre el campo de entrada debe estar marcada para acceder a este campo de entrada. El usuario puede habilitarla interactuando con la página.
Error
Indica que el usuario cometió un error de validación. El texto del error proporciona información a los usuarios para solucionarlo.
Solo lectura
Indica al usuario que el valor de entrada no se puede cambiar debido a factores externos. Por ejemplo, la falta de acceso de escritura. El usuario puede hacer algo para habilitarlo, por ejemplo, ponerse en contacto con un administrador.
Solo visualización
El estado de solo visualización se utiliza en dos casos:
Un elemento de interfaz de usuario se utiliza en el modo de visualización.
Un elemento de la interfaz de usuario se muestra en el modo de edición, pero nunca se puede editar.
Este estado se llamaba “solo lectura” antes.
En la siguiente imagen, se muestran los estados interactivos de los menús desplegables de selección.
El menú desplegable se expande y se contrae con la barra espaciadora. Los usuarios pueden navegar por las opciones utilizando las teclas de flecha y seleccionar por medio de barra espaciadora o la tecla Intro.
aria-labelledby establece una asociación programática entre el campo de entrada y su rótulo. El atributo WAI-ARIA de aria-autocomplete='list' comunica que aparecerá una lista de opciones entre las que el usuario puede elegir, pero el cuadro de edición conserva el foco. Al seleccionar la opción 'required' en Storybook, se agregan los atributos 'required' and 'aria-required="true"' al campo de entrada.
Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:
La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
El elemento se puede operar con teclado, así como con mouse.
Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.
El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.
Al utilizar este componente en su aplicación:
Ayude a los usuarios a comprender el contenido evitando nombres de opciones muy largos.
Evite el uso de elementos que implícitamente puedan recibir el foco, como botones, casillas de verificación y enlaces, o contenido implícitamente semántico, como encabezados, dentro de los componentes menú desplegable.
Note: Hay versiones obsoletas de este componente. Consulte una versión de los documentos anterior a la 10.0.x.
Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.
Warning: No se admite pasar opciones secundarias al componente Select que no sea SelectOption. Aunque podría funcionar, quizás dé lugar a comportamientos inesperados o se vea afectado por cambios introducidos en futuras versiones.
The label which will be displayed for this option.
Descripción
The value of the component. This prop takes precedence over the initialValue prop. If this prop is passed, the component works in controlled mode and its value changes only if this prop changes.
De forma predeterminada, el componente Select no permite al usuario borrar una opción seleccionada. Puede habilitar esta función utilizando una de las dos soluciones disponibles.
Ir a la opción que comienza con un carácter específico
Al presionar una tecla, el foco de selección se mueve a la siguiente opción que comienza con ese carácter. Si ninguna opción coincide con la condición, el foco no se moverá.
Todos los componentes relacionados con el menú desplegable definen la lista de opciones disponibles a través de la propiedad children de tipo ReactNode. Solo puede utilizar los siguientes subcomponentes como secundarios:
SelectOption en Select y MultipleSelect
ComboboxOption en Combobox y MultipleCombobox
Warning:
SelectOption y ComboboxOption solo deben utilizarse en el contexto de su respectivo componente "principal". Aunque pueden funcionar de forma aislada, esta no es una función compatible.
Los componentes Select y MultipleSelect solo están pensados para aceptar componentes SelectOption como secundarios. Aunque es posible que puedan mostrar o manejar otros tipos o elementos HTML, esta no es una función compatible.
Los componentes Combobox y MultipleCombobox solo están pensados para aceptar componentes ComboboxOption como secundarios. Aunque es posible que puedan mostrar o manejar otros tipos o elementos HTML, esta no es una función compatible.
Cualquier uso de estos componentes fuera de su ámbito de compatibilidad queda fuera del compromiso de cambios sin interrupciones, ya que dicho uso no se considera parte del contrato de componentes. Estos usos pueden dar lugar a comportamientos inesperados o verse afectados por cambios introducidos en futuras versiones.
Las entradas de Jutro han implementado controladores imperativos como mecanismo para proporcionar acceso a algunas características nativas comunes que podrían ser útiles para usted. Puede utilizar las siguientes características:
Establecer el foco para que usted establezca el foco del usuario en un componente específico.
Desenfocar para eliminar el foco del componente.
Desplazarse hasta el componente para poder llevar al usuario a un área específica de la página.
Estas características se proporcionan a través de la propiedad ref, que las expone de la siguiente manera:
Aunque algunos componentes de Jutro pueden proporcionar características complementarias o una función de ayuda para facilitar el proceso de validación, es su responsabilidad, como desarrollador, manejar la validación de cualquier entrada del usuario (con o sin ayudantes complementarios) y decidir qué mensajes de error se mostrarán.
Los componentes de Jutro se comportan en función de la implementación del desarrollador.
¿Cuándo se muestran los mensajes de error?
Los mensajes de error solo se muestran cuando los pasa al componente a través de la propiedad stateMessages. Esta propiedad recibe un objeto con el siguiente contenido:
El componente muestra cada mensaje de error proporcionado en el mismo orden que en la matriz.
¿Cuándo se produce la validación?
Esta decisión es suya, en calidad de desarrollador. Dado que los componentes no determinan cuándo se realiza la validación ni cuándo se debe mostrar el error, debe implementar la lógica para manejarla de acuerdo con los requisitos del proyecto, por ejemplo, mientras el usuario edita el contenido, cuando el componente pierde el foco y en el envío de formularios.
Consulte la sección Uso para obtener más información sobre cómo y cuándo utilizar Select, y las pestañas específicas para obtener más información sobre las funciones que proporciona el componente.
Note: La mayoría de las funciones y propiedades de los cuatro componentes menú desplegable no tienen diferencias en cuanto al uso. Algunos ejemplos de otros componentes también pueden ser relevantes para Select.
Puede deshabilitar por completo cualquiera de los componentes menú desplegable si establece propiedad disabled en true. También puede deshabilitar solo las opciones específicas utilizando la propiedad disabled de los componentes SelectOption y ComboboxOption. En caso de que todo el componente esté deshabilitado, la propiedad disabled de las opciones no tiene ningún efecto.
Este es un comportamiento común para todos los componentes menú desplegables: cuando se establece la propiedad value, el usuario no puede modificar directamente el componente, sino que la implementación del desarrollador la administrará en su totalidad.
Este ejemplo se aplica a todos los componentes menú desplegable:
exportfunctionSelectControlled(){ const[updatedValue, setNewValue]=useState(null); constonChange=(e, newValue)=>{ setNewValue(newValue); }; const options =[ <SelectOption value={{ id:'1', label:'Option 1', }} />, <SelectOption value={{ id:'2', label:'Option 2', }} />, <SelectOption value={{ id:'3', label:'Option 3', }} />, <SelectOption value={{ id:'4', label:'Option 4', }} />, <SelectOption value={{ id:'5', label:'Option 5', }} />, ]; return( <div> <Select label="Choose values" secondaryLabel="This value will be passed to the list of options below" onChange={onChange}> {options} </Select> <br/> <Select label="Changes with the above" value={updatedValue}> {options} </Select> </div> ); }
Utilizando la propiedad ref y los controladores imperativos proporcionados ('focus', 'blur' y 'scrollIntoView'), es posible realizar diferentes acciones nativas. Por ejemplo, establecer el foco en el componente:
Los componentes menú desplegable no manejan el proceso de validación, pero usted puede manejar el estado de error y los mensajes que se mostrarán mediante la propiedad stateMessages.
La lógica de mensajes de estado funciona para todos los componentes menú desplegable; a continuación, se muestra un ejemplo de MultipleSelect:
De forma predeterminada, el componente Select no permite al usuario borrar una opción seleccionada. Puede habilitar esta función utilizando una de las dos soluciones disponibles.
Para habilitar la eliminación de la opción seleccionada, utilice las propiedades placeholder y showPlaceholderAsOption. En esta solución, el marcador de posición proporcionado está disponible como la primera opción desplegable, lo que permite a los usuarios anular la selección de la opción seleccionada al elegirla.
Debe establecer estas dos propiedades de la siguiente manera:
placeholder no puede estar vacío.
showPlaceholderAsOption en true
Esta es la solución recomendada para borrar la opción seleccionada en el componente Select, ya que se ajusta a los patrones de diseño estándar y mejora la accesibilidad al evitar elementos interactivos dentro del menú desplegable.
Para activar el borrado de la entrada con un solo clic en el botón de ícono, establezca la propiedad clearable en true. El botón aparece cuando se selecciona la opción. Permite al usuario anular la opción seleccionada.
Si bien esta solución permite borrar con tan solo un clic, introduce un elemento interactivo dentro del menú desplegable, lo que puede reducir la accesibilidad.
Se agregó la propiedad clearable, que, cuando se establece en true, permite al usuario borrar la opción seleccionada con un solo clic en el botón del ícono.
Se introdujo un nuevo componente @jutro/components/Select.
El componente anterior DropdownSelectField quedó obsoleto y se trasladó al paquete @jutro/legacy. Para ver su documentación, consulte la versión de la documentación anterior a la 10.0.
Anatomía del componente menú desplegable, de la variante selección.
