## Checkbox Un grupo de opciones para manejar múltiples elecciones. ### Uso básico Checkbox puede ser usado para alternar entre dos estados. :::demo Define `v-model`(enlaza la variable) en `el-checkbox`. El valor por defecto es un `Boolean` para un `checkbox`, y se convierte en `true` cuando este es seleccionado. El contenido dentro del tag `el-checkbox` se convierte en la descripción al costado del botón del checkbox. ```html ``` ::: ### Estado Deshabilitado Estado deshabilitado para el checkbox. :::demo Setear el atributo `disabled`. ```html ``` ::: ### Grupo de Checkboxes Es usado por multiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada. :::demo El elemento `checkbox-group` puede manejar multiples checkboxes en un grupo usando `v-model` el cuál está enlazado a un `Array`. Dentro del elemento `el-checkbox`, `label` es el valor del checkbox. Si en ese tag no hay contenido anidado, `label` va a ser mostrado como la descripción al lado del botón del checkbox. `label` también se corresponde con los valores del array. Es seleccionado si el valor especificado existe en el array y viceversa. ```html ``` ::: ### Indeterminado La propiedad `indeterminate` puede ser usada para generar el efecto de marcar todos (check all). :::demo ```html ``` ::: ### Cantidad Mínima / Máxima de elementos seleccionados Las propiedades `min` y `max` pueden limitar la cantidad de elementos seleccionados. :::demo ```html ``` ::: ### Estilo tipo Botón Checkbox con estilo tipo Botón. :::demo Sólo debe cambiar el elemento `el-checkbox` por el elemento `el-checkbox-button`. También proveemos el atributo `size`. ```html ``` ::: ### Con bordes :::demo El atributo `border` agrega un borde a los Checkboxes. ```html ``` ::: ### Atributos de Checkbox | Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | ------------- | ---------------------------------------- | ------------------------- | --------------------- | ----------- | | label | valor del Checkbox si es usado dentro de un tag `checkbox-group` | string / number / boolean | — | — | | true-label | valor del Checkbox si está marcado | string / number | — | — | | false-label | valor del Checkbox si no está marcado | string / number | — | — | | disabled | especifica si el Checkbox está deshabilitado | boolean | — | false | | border | especifica si agrega un borde alrededor del Checkbox | boolean | — | false | | size | tamaño del Checkbox, sólo funciona si `border` es true | string | medium / small / mini | — | | name | atributo 'name' nativo | string | — | — | | checked | especifica si el Checkbox está marcado | boolean | — | false | | indeterminate | similar a `indeterminate` en el checkbox nativo | boolean | — | false | ### Eventos de Checkbox | Nombre | Descripción | Parametros | | ------ | ---------------------------------------- | -------------------- | | change | se ejecuta cuando el valor enlazado cambia | el valor actualizado | ### Atributos de Checkbox-group | Atributo | Descripción | Tipo | Valores aceptados | Por Defecto | | ---------- | ---------------------------------------- | ------- | --------------------- | ----------- | | size | tamaño de los checkboxes de tipo botón o los checkboxes con border | string | medium / small / mini | — | | disabled | especifica si los checkboxes anidados están deshabilitados | boolean | — | false | | min | cantidad mínima de checkboxes que deben ser marcados | number | — | — | | max | cantidad máxima de checkboxes que pueden ser marcados | number | — | — | | text-color | color de fuente cuando el botón está activo | string | — | #ffffff | | fill | color de border y de fondo cuando el botón está activo | string | — | #409EFF | ### Eventos de Checkbox-group | Nombre de Evento | Descripción | Parametros | | ---------------- | ---------------------------------------- | -------------------- | | change | se ejecuta cuando el valor enlazado cambia | el valor actualizado | ### Atributos de Checkbox-button | Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | ----------- | ---------------------------------------- | ------------------------- | ----------------- | ----------- | | label | valor del checkbox cuando es usado dentro de un `checkbox-group` | string / number / boolean | — | — | | true-label | valor del checkbox si este está marcado | string / number | — | — | | false-label | valor del checkbox si este no está marcado | string / number | — | — | | disabled | especifica si el checkbox está deshabilitado | boolean | — | false | | name | atributo 'name' del checbox nativo | string | — | — | | checked | si el checkbox está marcado | boolean | — | false |