import { Story, Canvas, Preview, ArgsTable } from '@storybook/addon-docs'; import image1 from '../../stories/assets/Docum_SDSS_Componentes/06_Casilla/01_Casilla_Opciones.png'; import image2 from '../../stories/assets/Docum_SDSS_Componentes/06_Casilla/02_Casilla_Anatomia_Anidados.png'; import image3 from '../../stories/assets/Docum_SDSS_Componentes/06_Casilla/03_Casilla_Anatomia_Controles.png'; import image4 from '../../stories/assets/Docum_SDSS_Componentes/06_Casilla/04_Casilla_Anatomia_Posicion.png'; import image5 from '../../stories/assets/Docum_SDSS_Componentes/06_Casilla/05_Casilla_Comportamiento.png'; # Casilla / Checkbox Utilizaremos las casillas para dar un rango cerrado de **opciones** al usuario, de las cuales podrá marcar todas las que considere, ninguna o un número cualquiera, incluso todas. Este componente es similar al **botón de radio**, con la particularidad de que permite múltiples selecciones.

También se usa una **casilla aislada** para dar opción de marcar una preferencia que presenta solo dos estados posibles “sí” y “no” según la casilla esté marcada o no. No se debe usar nunca las casillas para conjuntos de opciones excluyentes, es decir, cuando solo se puede elegir una opción. En esos casos utilizaremos el componente botón de radio. En caso de tener un conjunto de casillas checkbox estos deberán estar agrupados mediante el atributo “group” al igual que sucede con los botones de radio. ### Contenido Si se presenta un grupo de casillas, como es lo habitual, se suele tener una **etiqueta del grupo** en la parte superior para comunicar el grupo y dar guías al usuario para realizar la selección. Para esta etiqueta de grupo se recomienda usar un texto en formato frase que indique claramente el contexto de la selección. Se debe ser claro en indicar las consecuencias de la selección solicitada al usuario. Para las **etiquetas** de cada casilla se recomienda usar frases cortas y concisas. Si los textos son demasiado largos, el excedente continuará en la siguiente línea. No se recomienda truncar los textos largos. Las casillas pueden **anidarse** creando jerarquías de opciones. Los usuarios pueden seleccionar un subgrupo completo de casillas, o una o varias de ellas individualmente.

Al contrario que con el botón de radio, dada la naturaleza de este componente, no se recomienda que haya un valor seleccionado por **defecto**, a no ser que se decida ofrecer una respuesta predeterminada para el usuario. ### Anatomía

El control de la casilla siempre estará **alineado** con la primera línea del texto. Tanto el control como la etiqueta están alineados por arriba, no se debe centrar el control y la etiqueta. ### Comportamiento Los usuarios pueden **activar** las opciones de un grupo de casillas clicando tanto en el control como en la etiqueta. Esta dualidad permite una mayor sencillez a la hora de usar este componente. Si se usa un teclado, los usuarios pueden navegar entre las distintas opciones de un grupo con las teclas de “flecha arriba” y “flecha abajo”. Para seleccionar una opción se puede realizar con la tecla “espacio” cuando el control deseado tiene el foco. En las casillas anidadas, al marcar una **casilla padre** se seleccionan automáticamente todas las casillas hijas. De la misma manera al deseleccionar una casilla padre, se deseleccionarán todas las hijas. Las casillas presentan así tres **valores**, seleccionado, deseleccionado e indeterminado. Cuando solo algunas de las casillas hijo de un subgrupo están seleccionadas, la casilla padre tendrá el valor indeterminado. Así pues, los **estados** del botón de radio son enabled, hover, focus, selected, indeterminated, disabled y skeleton.