Caja

    Utilice el componente Casilla de verificación para permitir al usuario realizar una selección, que generalmente expresa una preferencia o acuerdo en un formulario. La casilla de verificación es visualmente idéntica a la Ignite UI for Angular

    Demostración de casilla de verificación

    Estado de interacción

    La casilla de verificación se puede insertar en un estado Habilitado o Deshabilitado. En Sketch y Adobe XD debes seleccionar el estado antes de insertar el componente. En Figma, sin embargo, hemos agregado más estados, como Habilitado e inválido, Habilitado y desplazado, Habilitado desplazado e inválido, Habilitado y enfocado y Habilitado enfocado e inválido, que se pueden cambiar en el panel de propiedades.

    Plantilla de diseño

    En Sketch, Checkbox admite variantes de posición de etiqueta donde la etiqueta Checkbox se coloca antes o después del elemento Checkbox. En Figma, puede cambiar la posición de la etiqueta utilizando la propiedad "Posición de la etiqueta". En Adobe XD, utilizamos pilas para permitirle cambiar las posiciones de las etiquetas y las casillas de verificación en tiempo de diseño simplemente arrastrándolas hacia la izquierda o hacia la derecha del objeto visual de la casilla de verificación.

    Estado

    La casilla de verificación proporciona estados de selección Activado, Desactivado e Indeterminado. En Figma, puede cambiar el estado de selección usando la propiedad "Estado" del panel de propiedades. En Sketch esto se logra con Symbol Overrides, mientras que en Adobe XD utilizamos el paradigma Component States para permitirle cambiar fácilmente entre estados.

    Estilismo

    Checkbox viene con flexibilidad de estilo a través de las diversas opciones para sus colores de verificación y relleno, así como mecanismos para establecer la posición y el color de la etiqueta.

    Uso

    Cuando se necesitan muchas casillas de verificación, querrá organizarlas en un grupo de columnas, lo que hace que sea realmente fácil escanear rápidamente la lista. También se pueden organizar menos casillas de verificación en una sola línea, una al lado de la otra, pero debe evitar la disposición en varias columnas.

    Hacer No

    Recursos adicionales

    Tema relacionado:

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.