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

    Checkbox Demo

    Interaction State

    La casilla de verificación se puede insertar en un estado Habilitado o Deshabilitado. En Sketch y Adobe XD, debe seleccionar el estado antes de insertar el componente. En Figma, puede aplicar adicionalmente una sola o una combinación de las siguientes propiedades: Hover, Focused y Invalid, que se pueden cambiar en el panel de propiedades.

    Layout Template

    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.

    State

    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.

    Usage

    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

    Additional Resources

    Tema relacionado:

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