Componente CheckBox

El componente CheckBox te permite crear casillas de verificación personalizadas con diversas propiedades y opciones. Puedes utilizarlo para obtener entradas de selección en formularios u otras interacciones.

Uso en Componentes

Utilizando en una Vista

Puedes usar el componente CheckBox en tus vistas de la siguiente manera:

<template>
  <CheckBox
    label="Acepto los términos y condiciones"
    v-model:model-value="aceptoTerminos"
    @onSwitch="handleCheckBoxSwitch(index, $event, input)"
    @setError="handleCheckBoxError(index, $event, input)"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const aceptoTerminos = ref(false);

// Método para manejar el evento de cambio de la casilla de verificación
const handleCheckBoxSwitch = (index, value, input) => {
  // Lógica para manejar el cambio de estado de la casilla de verificación
};

// Método para manejar el evento de establecimiento de error
const handleCheckBoxError = (index, value, input) => {
  // Lógica para manejar el error en la casilla de verificación
};

</script>

Propiedades

El componente CheckBox acepta las siguientes propiedades:

Propiedad	Tipo	Valor por defecto	Descripción
value	Cualquier tipo (requerido)		Define el valor de la casilla de verificación.
option	Object, number, string, boolean (requerido)		Especifica las opciones para las casillas de verificación.
customClass	String		Agrega clases de estilo personalizadas a la casilla de verificación.
validations	Object		Define las validaciones para la casilla de verificación.
disabled	Boolean		Deshabilita la casilla de verificación.
errors	Array de strings		Muestra los mensajes de error asociados a la casilla de verificación.
id	String		Establece el atributo id de la casilla de verificación.
name	String		Establece el atributo name de la casilla de verificación.
state	Boolean		Indica el estado de la casilla de verificación.
listenChange	Boolean		Indica si se debe escuchar el evento change de la casilla de verificación.
listenForm	Boolean		Indica si se debe escuchar los cambios en el formulario que contiene la casilla de verificación.
keyName	String		Define el nombre de la propiedad en los elementos de option que se utilizará como clave.
uncheckedValue	Cualquier tipo (null)		Define el valor de la casilla de verificación cuando no está marcada.
slotContent	String		Define el contenido personalizado para la casilla de verificación.
size	BaseSize ('sm', 'md', 'lg')