Las casillas de verificación permiten a los usuarios seleccionar de entre una lista de elementos. A menudo aparecen en formularios en los que es necesario recopilar información del usuario. Al usar casillas de verificación, los usuarios pueden seleccionar uno o más elementos de un conjunto.
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 una acción debe aplicarse al instante. Utilice el componente conmutador en su lugar.
Si un usuario solo puede seleccionar una opción de una lista. Utilice el componente de ](pathname://es/radio-group.mdx)grupo de selección[ en su lugar.
Cuando hay 6 o más opciones entre las que los usuarios pueden elegir. En su lugar, utilice el componente menú desplegable.
Un grupo de casillas de verificación es una lista de elementos de casillas de verificación debajo de un rótulo de grupo. Los usuarios pueden seleccionar todos los elementos que sean relevantes debajo del rótulo del grupo. Este formato es útil cuando hay varias opciones válidas para una sola instancia.
Jutro también admite casillas de verificación con un solo elemento. Tenga en cuenta que las casillas de verificación se pueden usar para activar o desactivar una opción (por ejemplo, al habilitar o deshabilitar un valor de configuración).
Grupo de casillas de verificación (izquierda) y casilla de verificación única (derecha).
La casilla de verificación consta de los siguientes elementos:
Rótulo de grupo de casilla de verificación: Explica el propósito de un grupo de casillas de verificación.
Texto de ayuda (opcional): Proporciona contexto adicional para el grupo de casillas de verificación.
Entrada de la casilla: Indica el estado adecuado. De forma predeterminada, no está seleccionada.
Rótulo de la casilla de verificació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 una casilla de verificación determinada. La descripción emergente aparece cuando se pasa el cursor sobre el ícono.
Un grupo de casillas de verificación se puede organizar vertical u horizontalmente, según la estructura de la página. De forma predeterminada, las casillas de verificación están dispuestas verticalmente para facilitar la lectura.
Como ocurre con todos los componentes de entrada, el rótulo del grupo de casillas de verificación puede aparecer en la parte superior (predeterminado) o a la izquierda de la entrada misma.
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 grupos de casillas de verificación deben tener un rótulo que describa lo que representa la lista de opciones. Un grupo de casillas 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.
Uso de rótulos de casillas de verificación claras y coherentes
Intente que todos los rótulos de un grupo de casillas de verificación tengan la estructura más paralela posible. Deben seguir el mismo formato y tener aproximadamente la misma longitud.
Use rótulos que sean claros, concisos y no den lugar a ambigüedades. Los rótulos deben describir opciones que sean fáciles de entender para los usuarios promedio.
Use palabras positivas y estructuras en voz activa para los rótulos de las casillas de verificación. Deje en claro lo que sucederá si el usuario marca una casilla en particular y qué sucederá si no lo hace.
Evite negaciones como “No me envíen notificaciones por correo electrónico”. Esto significaría que el usuario tendría que marcar la casilla para que algo no sucediera.
Al solicitar el consentimiento del usuario, utilice la primera persona. Por ejemplo, “Acepto los términos de servicio”.
Use estructuras paralelas y trate de mantener la misma longitud para todos los rótulos.
No utilice una redacción muy variada. Esto puede ralentizar o incluso confundir a los usuarios.
Concisión de los rótulos de las casillas de verificación
Limite el rótulo de texto de la casilla de verificación a una sola línea. Recomendamos usar de una a tres palabras para los rótulos de las casillas.
No trunque los rótulos de casillas de verificación con puntos suspensivos (...). Si es demasiado largo para el espacio horizontal disponible, intente reformularla. También puede ajustar los rótulos largos de la casilla de verificación a una segunda línea. Esto es preferible al truncamiento.
El texto del rótulo de la casilla de verificación debe ser conciso. Si fuera necesario, ajústelo a una segunda línea.
No trunque el texto de los rótulos de casillas de verificación con puntos suspensivos.
Los grupos de casillas de verificación y las casillas de verificación pueden incluir mensajes de error para mostrar que se requiere una selección para avanzar o que una selección no es válida.
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.
El componente casilla de verificación tiene 2 estados principales: sin marcar y marcada. De forma predeterminada, las casillas de verificación no tienen ninguna de las opciones seleccionadas.
Además de los estados sin marcar y marcada, las casillas de verificación también tienen estados interactivos para habilitada, deshabilitada, con cursor encima, en foco, activa y error.
Ilustración
Estado
Descripción
Habilitado
Comunica al usuario que el elemento está habilitado para la interacción (predeterminado).
Deshabilitado
Comunica al usuario que el elemento no está actualmente disponible para la interacción.
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.
Error
Indica que el usuario no marcó todos los campos obligatorios (u otro error relacionado con el formulario).
Los usuarios pueden seleccionar una opción haciendo clic en la casilla de verificación o en su rótulo. Las investigaciones demuestran que hacer clic en un objetivo más grande es más rápido.
Cuando la casilla de verificación tiene el foco, al presionar la barra espaciadora se cambia el estado de la casilla. Esto sigue los estándares establecidos por el World Wide Web Consortium (W3C).
Para el grupo de casillas de verificación: El grupo de casillas de verificación implementa <input type='checkbox'>. El grupo recibe su nombre accesible del rótulo del grupo. Esto se puede cambiar a través del campo de rótulo en Storybook. Se implementa una asociación “for/id” para asociar cada casilla de verificación individual con su rótulo, mientras que el estado “marcado/no marcado” del elemento se comunica a través del atributo aria-checked.
Para la casilla de verificación única: El elemento de la casilla de verificación se asocia mediante programación con su rótulo. Esto significa que los usuarios pueden usar la tecla TAB para navegar por los elementos, y sus respectivos rótulos serán narrados por los lectores de pantalla. El estado “marcado/no marcado” se comunica a través del atributo aria-checked.
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.
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.
State of the checkbox. If set to true, the checkbox is checked. Takes precedence over initialChecked. If this prop is passed, the component works in controlled mode and its value will change only if this prop changes.
If set to true, the component is rendered in disabled state. Note that when checkbox group is disabled all checkboxes inside group are disabled as well.
Puede utilizar atributos de entrada HTML, excepto aquellos que estén invalidados por Jutro. Estos atributos se asignan al elemento HTML input.
<CheckboxGrouplabel="This is a group"> <Checkbox label="This is the first one" id="firstOption" /> <Checkbox label="This is the second one" id="secondOption" /> <Checkbox label="This is the third one" id="thirdOption" /> </CheckboxGroup>
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:
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.
El componente Checkbox se puede utilizar solo, fuera del contexto CheckboxGroup.
<Checkboxlabel="This is a single checkbox"/>
Casillas de verificación básicas en el grupo de casillas de verificación
El componente CheckboxGroup sirve de contenedor de un conjunto de elementos Checkbox. Puede elegir mostrar u ocultar el rótulo, pero es obligatorio para la accesibilidad del componente.
<CheckboxGrouplabel="This is a group"> <Checkboxlabel="option 1"/> <Checkboxlabel="option 2"/> </CheckboxGroup>
Para ocultar el rótulo CheckboxGroup, establezca la propiedad hideLabel en true. Esto no afecta a ninguno de los otros comportamientos del elemento CheckboxGroup.
<CheckboxGroup label="This is only for aria-label" hideLabel={true}> <Checkboxlabel="option 1"/> <Checkboxlabel="option 2"/> </CheckboxGroup>
Ambos componentes permiten a los desarrolladores mostrar mensajes de error. Cuando se establece en el nivel CheckboxGroup, los errores se muestran debajo de todas las opciones. Sin embargo, cuando se establece en el nivel Checkbox dentro de un CheckboxGroup, el mensaje se ignora y no tiene efecto.
exportfunctionCheckboxMessages(){ const[validationMessages, setValidationMessages]=useState({}); const[groupValidationMessages, setGroupValidationMessages]=useState({}); const onChange =useCallback((e, newChecked)=>{ setValidationMessages({}); setGroupValidationMessages({}); if(newChecked){ setValidationMessages({error:['This is ignored']}); setGroupValidationMessages({error:['Only second checkbox can be marked']}); } },[]); return( <CheckboxGroup label="Do not select the forbidden option" stateMessages={groupValidationMessages} > <Checkbox label="Forbidden option" onChange={onChange} stateMessages={validationMessages} /> <Checkboxlabel="You can select this one"/> </CheckboxGroup> ); } }
Aunque esto no se implementa como parte del componente Checkbox, el comportamiento nativo de un elemento de entrada HTML está disponible. En este caso, el estado indeterminado se puede configurar mediante programación a través de JavaScript. Una casilla de verificación en estado indeterminado tiene una línea horizontal en la casilla, en lugar de una marca de verificación o tic. En el siguiente ejemplo, el estilo se modifica para que la opción sea visible.
exportfunctionSetIndeterminateState(){ const onChange =useCallback((e, newCheck)=>{ (document.getElementById('checkbox2')asHTMLInputElement).indeterminate= newCheck; },[]); const style ={ opacity:100}; return( <CheckboxGrouplabel="Group of checkboxes"> <Checkbox label="Set the next checkbox as 'indeterminate'" onChange={onChange} /> <Checkbox label="This is another checkbox" id="checkbox2" checked={false} style={style} /> </CheckboxGroup> ); }
Puede agregar información contextual a los componentes CheckboxGroup y Checkbox 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.
<CheckboxGroup label="This is a group" tooltip="Select one of the available options" secondaryLabel="This label provides additional context."> <Checkbox tooltip="By selecting this option, you enable feature X." label="Option 1" value="1" /> <Checkbox tooltip={{text:"By selecting this option, you enable feature Y.",trigger:"pointerover"}} label="Option 2" value="2" secondaryLabel="This label provides additional context." /> </CheckboxGroup>
Se agregó la propiedad secondaryLabel al componente Checkbox. Esta propiedad le permite agregar un rótulo adicional que esté asociado con la casilla de verificación individual.
Se introdujeron los componentes nuevos @jutro/components/Checkbox y @jutro/components/CheckboxGroup que reemplazan CheckboxField y CheckboxGroupField.
Los componentes anteriores relacionados con las casillas de verificación quedaron obsoletos y se trasladaron al paquete @jutro/legacy. Para ver su documentación, consulte una versión anterior.
