Selectores
Checkbox
Un componente de checkbox con soporte para etiquetas, descripciones y selección grupal.
Tests
94%
Uso
El componente SCheckbox proporciona un input de checkbox estilizado con slots opcionales de etiqueta y descripción. Soporta tanto selección booleana individual como selección grupal basada en arrays mediante v-model.
Deshabilitado
Usa la prop disabled para prevenir la interacción del usuario con el checkbox. El componente aparecerá con opacidad reducida.
Invertido
Usa la prop reverse para colocar el checkbox en el lado derecho con la etiqueta a la izquierda, usando un layout justify-between.
En Línea
Usa la prop inline para renderizar la etiqueta en línea con el texto de descripción en lugar de encima de él.
Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
modelValue | boolean | string[] | - | El valor vinculado. Usa boolean para checkboxes individuales o string[] para grupos. |
value | string | - | El identificador de valor cuando se usa en grupo con un modelValue de tipo array. |
disabled | boolean | false | Deshabilita el checkbox y reduce la opacidad. |
reverse | boolean | false | Coloca el checkbox en el lado derecho de la etiqueta. |
inline | boolean | false | Renderiza la etiqueta en línea con la descripción. |
name | string | - | El atributo HTML name del input. |
id | string | auto-generado | El atributo HTML id. Se genera automáticamente si no se proporciona. |
Eventos
| Evento | Payload | Descripción |
|---|---|---|
update:modelValue | boolean | string[] | Se emite cuando el estado del checkbox cambia. |
Slots
| Nombre | Descripción |
|---|---|
default | El texto de la etiqueta del checkbox. |
description | Texto de descripción adicional mostrado debajo o al lado de la etiqueta. |