Skip to content

Casilla de verificación ​

En el Mini Programa es view dibujado a medida

No se usa el componente checkbox nativo (en MP los estilos no se pueden controlar); en su lugar se dibuja la casilla con view + el icono de lh-icon, para garantizar la coherencia visual con las demás plataformas de la familia.

Uso básico ​

vue
<template>
  <lh-checkbox v-model="checked" label="Acepto el acuerdo" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const checked = ref(false)
</script>

Grupo de casillas ​

vue
<template>
  <lh-checkbox-group v-model="values">
    <lh-checkbox value="a" label="Opción uno" />
    <lh-checkbox value="b" label="Opción dos" />
    <lh-checkbox value="c" label="Opción tres" disabled />
  </lh-checkbox-group>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const values = ref(['a'])
</script>

Estado indeterminado ​

vue
<lh-checkbox v-model="checked" indeterminate label="Seleccionar todo (parcialmente seleccionado)" />

Checkbox Props ​

PropDescripciónTipoPredeterminado
modelValue (v-model)Si está marcadabooleanfalse
valueValor identificador dentro del groupunknown—
labelTextostring—
disabledDesactivadabooleanfalse
indeterminateEstado indeterminado (semi-seleccionado)booleanfalse
namename nativostring—
sizeTamaño'small' | 'medium' | 'large'—
customClassClase personalizadastring—
sxProps rápidas de disposiciónLhSxProps—

CheckboxGroup Props ​

PropDescripciónTipoPredeterminado
modelValue (v-model)Array de valores marcadosunknown[][]
disabledDesactiva todos los elementos hijosbooleanfalse
namename nativostring—
sizeTamaño (se propaga a los elementos hijos)'small' | 'medium' | 'large'—

Events ​

EventoDescripciónParámetros de la retrollamada
update:modelValueCambio de valor(value)
changeCambio de valor(value)