Checkbox
WARNING
label act as value has been deprecated, label is used only as display text, this action will be removed in 3.0.0, consider switching to new API.
New API value has been added in 2.6.0, you can use value API to set the value of Checkbox.
Un grupo de opciones para manejar múltiples elecciones.
Uso básico
El checkbox solo se puede utilizar para cambiar entre dos estados.
Estado deshabilitado
Estado deshabilitado para el checkbox.
Grupo de Checkboxes
Es usado por múltiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada.
Indeterminado
La propiedad indeterminate puede ser usada para generar el efecto de marcar todos (check all).
Mínimo / Máximo de elementos marcados
Las propiedades min y max pueden limitar la cantidad de elementos seleccionados.
Estilo del botón
Checkbox tipo Botón.
Con bordes
API Checkbox
Atributos de Checkbox
| Nombre | Descripción | Tipo | Por defecto |
|---|---|---|---|
| model-value / v-model | valor enlazado | string / number / boolean | — |
| value 2.6.0 | valor del checkbox cuando es usado dentro de un checkbox-group | string / number / boolean / object | — |
| label | label of the Checkbox when used inside a checkbox-group. If there's no value, label will act as value | string / number / boolean / object | — |
| true-value 2.6.0 | valor del Checkbox si está marcado | string / number | — |
| false-value 2.6.0 | valor del Checkbox si no está marcado | string / number | — |
| true-label deprecated | value of the Checkbox if it's checked | string / number | — |
| false-label deprecated | value of the Checkbox if it's not checked | string / number | — |
| disabled | específica si el Checkbox está deshabilitado | boolean | false |
| border | especifica si agrega un borde alrededor del Checkbox | boolean | false |
| size | tamaño del Checkbox | enum | — |
| name | atributo name nativo | string | — |
| checked | especifica si el Checkbox está marcado | boolean | false |
| indeterminate | Establecer estado indeterminado, sólo responsable del control de estilo | boolean | false |
| validate-event | si se activa la validación del formulario | boolean | true |
| tabindex | input tabindex | string / number | — |
| id | input id | string | — |
| controls a11y deprecated | igual que aria-controls, tendrá efecto cuando indeterminar es verdadero | string | — |
| aria-controls a11y 2.7.2 | same as aria-controls, takes effect when indeterminate is true | string | — |
Eventos de Checkbox
| Nombre | Descripción | Tipo |
|---|---|---|
| change | se dispara cuando el valor cambia | Function |
Slots de Checkbox
| Nombre | Descripción |
|---|---|
| default | personaliza el contenido por defecto |
API de CheckboxGroup
Atributos de CheckboxGroup
| Nombre | Descripción | Tipo | Por defecto |
|---|---|---|---|
| model-value / v-model | valor enlazado | object | [] |
| size | tamaño del Checkbox | enum | — |
| disabled | específica 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 | — |
| label a11y deprecated | native aria-label attribute | string | — |
| aria-label a11y 2.7.2 | native aria-label attribute | string | — |
| text-color | color de las letras cuando el botón está activo | string | #ffffff |
| fill | color del borde y de fondo cuando el botón está activo | string | #409eff |
| tag | etiqueta de elemento del grupo de checkbox | string | div |
| validate-event | si se activa la validación del formulario | boolean | true |
Eventos del CheckboxGroup
| Nombre | Descripción | Tipo |
|---|---|---|
| change | se dispara cuando el valor cambia | Function |
Slots de CheckboxGroup
| Nombre | Descripción | Subtags |
|---|---|---|
| default | personaliza el contenido por defecto | Checkbox / Checkbox-button |
CheckboxButton API
Atributos de CheckboxButton
| Name | Description | Tipo | Por defecto |
|---|---|---|---|
| value 2.6.0 | valor del checkbox cuando es usado dentro de un checkbox-group | string / number / boolean / object | — |
| label | label of the checkbox when used inside a checkbox-group. If there's no value, label will act as value | string / number / boolean / object | — |
| true-value 2.6.0 | valor del checkbox si este está marcado | string / number | — |
| false-value 2.6.0 | valor del checkbox si este no está marcado | string / number | — |
| true-label deprecated | value of the checkbox if it's checked | string / number | — |
| false-label deprecated | value of the checkbox if it's not checked | string / number | — |
| disabled | especifica si el checkbox está deshabilitado | boolean | false |
| name | atributo 'name' nativo | string | — |
| checked | si el checkbox está marcado | boolean | false |
Slots de CheckboxButton
| Nombre | Descripción |
|---|---|
| por defecto | personaliza el contenido por defecto |
云游君
Jeremy
三咲智子
kooriookami
Xc
btea
zz
C.Y.Kun
Delyan Haralanov
msidolphin
qiang
Karolis_Stoncius_Sneakybox
一只前端汪
Dinq
init-qy
MonsterPi
LIUCHAO
Hefty
ytx
一昂
opengraphica
gjfei
iceman
神楽坂みずき
童欧巴
on the field of hope
Hades-li
sea