Un grupo de selección muestra un conjunto de opciones mutuamente excluyentes entre las cuales una persona puede seleccionar exactamente una.
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.
Cuando haya varias opciones para seleccionar independientemente una de la otra. En su lugar, utilice el componente casilla de verificación.
Hay una gran cantidad de opciones (6 o más) entre las que los usuarios pueden elegir. En su lugar, utilice el componente menú desplegable.
El usuario puede seleccionar ninguna de las opciones o cambiar de opinión y anular la selección de una opción. En casos como este, considere usar el componente casilla de verificación. También puede optar por agregar la opción Ninguna de las anteriores al grupo de botones de selección en su lugar.
Note: Para mostrar un conjunto de opciones mutuamente excluyentes entre las cuales una persona puede seleccionar exactamente una, use botones de selección en lugar de casillas de verificación.
Rótulo de grupo de selección: Explica el propósito de un grupo de selección.
Texto de ayuda (opcional): Proporciona contexto adicional para el grupo de selección.
Entrada del botón de selección: Indica el estado adecuado. De forma predeterminada, se selecciona una opción.
Rótulo del botón de selección: Describe la información que se seleccionará o no.
Ícono de descripción emergente (opcional): Sirve para eliminar ambigüedades con respecto al contexto de un botón de selección determinado. La descripción emergente aparece cuando se pasa el cursor sobre el ícono.
Un grupo de selección se puede organizar vertical u horizontalmente, según la estructura de la página. De forma predeterminada, los botones de selección están dispuestos verticalmente para facilitar la lectura.
Como ocurre con todos los componentes de entrada, el rótulo del grupo de selección puede aparecer en la parte superior (predeterminado) o a la izquierda de la entrada misma.
Configure uno de los botones de selección, normalmente el primero, para que se seleccione de forma predeterminada. Esta selección agiliza la tarea al comunicar al usuario que debe elegir una opción en este conjunto. Se recomienda proporcionar una selección predeterminada para la mayoría de los casos de uso.
Sin embargo, hay algunos casos en los que la selección previa de un valor predeterminado es una presunción y podría dar como resultado una entrada incorrecta. Tenga en cuenta el contenido y la selección predeterminada, c ómo reaccionarán los usuarios a ella, además del efecto que la selección tendrá en el usuario y en la organización, tanto a corto como a largo plazo. Evite las selecciones predeterminadas que sean presuntuosas, agresivas, ofensivas o alienantes.
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.
Los botones de selección y las casillas de verificación no son intercambiables. Use botones de selección para seleccionar una sola opción de entre un pequeño conjunto de opciones mutuamente excluyentes (5 o menos). Use casillas de verificación cuando haya listas de opciones y el usuario pueda seleccionar cualquier cantidad de ellas, incluyendo ninguna, una o varias.
Utilice los botones de selección cuando solo se pueda seleccionar un elemento.
No utilice botones de selección cuando se puedan seleccionar varios elementos.
Los grupos de botones de selección deben tener un rótulo que describa lo que representa la lista de opciones. Un grupo de botones de selección sin rótulo es ambiguo e inaccesible.
Utilice el rótulo del grupo para indicar la categoría de la agrupación o describir las acciones que se deben realizar a continuación.
Incluya un rótulo que describa con claridad lo que representa la lista de opciones.
No dé por sentado que las opciones se entienden por sí solas sin un rótulo.
Concisión de los rótulos de los botones de selección
Limite el rótulo de texto del botón de selección a una sola línea. Recomendamos usar de una a tres palabras para los rótulos de los botones de selección.
No trunque el texto de los rótulos de botones de selección con puntos suspensivos (...). Si es demasiado largo para el espacio horizontal disponible, intente reformularla. También puede ajustar los rótulos largos de botones de selección a una segunda línea. Esto es preferible al truncamiento.
El texto de los rótulos de los botones de selección debe ser conciso. Si fuera necesario, ajústelo a una segunda línea.
No trunque el texto de los rótulos de botones de selección con puntos suspensivos.
Los usuarios solo pueden escoger una opción de un grupo de selección. Esto significa que cada opción debe ser clara y distinta. Evite las opciones que se superpongan.
Asegúrese de que las opciones sean bien diferentes.
No proporcione opciones con valores que se superpongan.
Asegúrese de que las opciones que proporcione sean integrales para que los usuarios puedan optar por una. Si es imposible incluir todo, ofrezca un botón con el rótulo Otro, complementado con un campo para escribir.
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.
Solo puede agregar un asterisco al grupo de selección, no a opciones individuales.
Utilice un asterisco para indicar que un campo es obligatorio.
No use un asterisco para indicar algo que sea opcional.
El componente botón de selección tiene 2 estados principales: seleccionado y no seleccionado. La vista predeterminada de un grupo de botones de selección es preseleccionar uno de los botones.
Los usuarios solo pueden seleccionar un botón a la vez. Cuando un usuario elige una opción, la anterior se anula automáticamente.
Estado seleccionado
Estado no seleccionado
Los botones de selección también tienen los estados habilitado, con cursor encima, en foco, activo, deshabilitado y error.
Ilustración
Estado
Descripción
Habilitado
Indica al usuario que el elemento está habilitado para la interacción (predeterminado).
Con cursor encima
Indica que el usuario ha colocado un cursor sobre el elemento (solo computadoras de escritorio).
En foco
Indica que el usuario resaltó el elemento, normalmente mediante un método de entrada como teclado o voz.
Activo
Indica que el usuario está haciendo clic o tocando el elemento.
Deshabilitado
Comunica al usuario que el elemento no está actualmente disponible para la interacción.
Error
Indica que hubo un error relacionado con este elemento. Por ejemplo, se debe realizar una selección para avanzar o una selección no es válida.
Los usuarios pueden ir de un botón de selección a otro utilizando las teclas de flecha. Para seleccionar un botón, los usuarios deben presionar INTRO o la barra espaciadora.
El grupo de botones de selección implementa el <input type="radio"> html, complementado con WAI ARIA para proporcionar el significado a los usuarios ciegos. El grupo se designa como tal con role='radiogroup', mientras que aria-checked alterna entre 'true' y 'false', según el estado del botón de selección. Los rótulos y los botones de selección se asocian mediante programación a través de una asociación 'for/id'. El valor de 'false' predeterminado de aria-required cambia a 'true' cuando la casilla de verificación requerida está marcada en Storybook.
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, asegúrese de lo siguiente:
Si un grupo de selección no tiene un valor predeterminado seleccionado, el foco pasa al primer botón de selección del grupo.
Los rótulos deben presentarse después del botón de selección.
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.
Position of radio group label, relative to radio options. 'top' - label will be placed above the option. 'left' - label will be placed on the left side of the options.
Value of the component. Takes precedence over initialValue. If this prop is passed, component works in controlled mode and its value will change only if this prop changes.
Puede utilizar atributos de entrada HTML, excepto aquellos que estén invalidados por Jutro. Estos atributos se asignan al elemento HTML input.
<RadioGrouplabel="This is a group"> <Radio label="This is the first one" value="1" id="firstOption" /> <Radio label="This is the second one" value="2" id="secondOption" /> <Radio label="This is the third one" value="3" id="thirdOption" /> </RadioGroup>
El resultado de pasar la propiedad id es que formará parte del input HTML que se crea en el DOM HTML.
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:
El componente Radio no debe utilizarse solo, sino que debe utilizarse en el ámbito del componente RadioGroup. El componente RadioGroup solo acepta elementos Radio como secundarios.
Warning: No se admite ningún uso diferente de los descritos anteriormente, ya que podría causar problemas inesperados en versiones futuras.
Precedencia de las propiedades disabled, displayOnly y readOnly
Si dos o más de las propiedades disabled, displayOnly, y readOnly se establecen en true al mismo tiempo, la prioridad es la siguiente:
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.
Radio no se puede usar solo, fuera del contexto de RadioGroup. RadioGroup debe recibir solo componentes Radio como elementos secundarios. La propiedad label es obligatoria en ambos componentes y la propiedad value solo se requiere para el componente Radio.
<RadioGrouplabel="This is a group"> <Radio label="option 1" value="1" /> <Radio label="option 2" value="2" /> </RadioGroup>
Selección deshabilitada en comparación con grupo de selección deshabilitado
Ambos componentes proporcionan una propiedad disabled. Sin embargo, cuando se establece en true al nivel de RadioGroup, se invalida cualquier configuración de deshabilitación al nivel del Radio. Si hay alguna configuración de propiedad disabled={false} entre las opciones Radio, pero el RadioGroup la establece en disabled={true}, todas las opciones quedan deshabilitadas.
<RadioGroup label="This is a group" disabled={true}> <Radio label="option 1" value="1" disabled={false} /> <Radio label="option 2" value="2" disabled={false} /> </RadioGroup>
Es posible definir qué opción se selecciona inicialmente pasando la propiedad value a la propiedad initialValue de RadioGroup.
<RadioGroup label="This is a group with second option selected initially" initialValue="2"> <Radio label="option 1" value="1" /> <Radio label="option 2 is initially selected" value="2" /> </RadioGroup>
El componente RadioGroup no proporciona una lógica de validación específica, pero sí la forma de incluir la validación del desarrollador y usar la propiedad stateMessages para mostrar cualquier mensaje de error necesario.
Este es un ejemplo de manejo de validación cuando se activa el evento onChange.
exportfunctionRadioValidation(){ const[groupValidationMessages, setGroupValidationMessages]=useState({}); const onChange =useCallback((e, newValue)=>{ setGroupValidationMessages({}); if(newValue =='1'){ setGroupValidationMessages({ error:['Only second option can be marked'], }); } },[]); return( <RadioGroup label="Do not select the forbidden option" onChange={onChange} stateMessages={groupValidationMessages}> <Radio label="Do not select the forbidden option" value="1" /> <Radio label="This option can be selected" value="2" /> </RadioGroup> ); }
RadioGroup y algunas otras entradas le permiten usar una propiedad ref para acceder a algunos comportamientos nativos. Sin embargo, solo se exponen algunas características. En este caso, cuando se hace clic en el botón, el foco se establece automáticamente en la entrada de abajo.
<RadioGroup label="This is a group with second option selected initially" initialValue="2"> <Radio label="option 1" value="1" /> <Radio label="option 2 is initially selected" value="2" /> </RadioGroup>
Puede agregar información contextual a los componentes RadioGroup y Radio utilizando sus propiedades personalizadas.
La propiedad secondaryLabel acepta un objeto intlMessageShape para mostrar contexto adicional debajo del rótulo principal.
La propiedad tooltip acepta ya sea un objeto intlMessageShape o un objeto personalizado. Utilícelo para mostrar una descripción emergente con información adicional. Puede modificar el comportamiento de la descripción emergente mediante el objeto personalizado.
<RadioGroup label="This is a group" tooltip="Select one of the available options" secondaryLabel="This label provides additional context."> <Radio tooltip="By selecting this option, you enable feature X." label="Option 1" value="1" /> <Radio tooltip={{text:"By selecting this option, you enable feature Y.",trigger:"pointerover"}} label="Option 2" value="2" secondaryLabel="This label provides additional context." /> </RadioGroup>
Se agregó la propiedad secondaryLabel al componente Radio. Esta propiedad le permite agregar un rótulo adicional que esté asociado con el campo de botón de selección.
Se eliminó la propiedad no utilizada readOnly de los componentes RadioGroup y Radio. Esta propiedad no tenía ninguna función y se había expuesto por error.
Se introdujeron los componentes nuevos @jutro/components/RadioGroup y @jutro/components/Radio. Estos componentes reemplazan a otros componentes relacionados con el botón Radio existente RadioButtonField, RadioButtonCardField, ImageRadioButtonField, RadioField y RadioGroup.
Los componentes anteriores relacionados con el botón Radio quedaron obsoletos y se trasladaron al paquete @jutro/legacy. Para ver su documentación, consulte una versión anterior de la documentación.
