Casilla de verificación

Permite la selección múltiple dentro de un conjunto de opciones; admite uso individual y combinado con LhCheckboxGroup.

Uso básico

Individual y en grupo

Casilla única: no seleccionada

Tinta chinaDanqingEspacio en blancoGongbi (desactivado)

Seleccionado: ink

import { useState } from 'react'
import { LhCheckbox, LhCheckboxGroup } from '@lh-ui/react'

export default function Demo() {
  const [checked, setChecked] = useState(false)
  const [group, setGroup] = useState<string[]>(['ink'])

  return (
    <>
      <LhCheckbox checked={checked} onChange={(val) => setChecked(val)}>
        Casilla de verificación individual
      </LhCheckbox>

      <LhCheckboxGroup value={group} onChange={(val) => setGroup(val as string[])}>
        <LhCheckbox value="ink">Tinta china</LhCheckbox>
        <LhCheckbox value="danqing">Pintura tradicional</LhCheckbox>
        <LhCheckbox value="blank">Espacio en blanco</LhCheckbox>
      </LhCheckboxGroup>
    </>
  )
}

Checkbox Props

Prop	Descripción	Tipo	Valores permitidos	Predeterminado
value	Valor de la opción (actúa dentro de Group)	unknown	—	—
checked	Estado de selección controlado (uso individual)	boolean	—	—
defaultChecked	Selección por defecto no controlada	boolean	—	false
label	Texto mostrado	string	—	—
disabled	Desactivado	boolean	—	false
indeterminate	Estado indeterminado (solo afecta a lo visual, no produce un valor)	boolean	—	false
size	Tamaño	'large' | 'middle' | 'small'	—	Sigue ConfigProvider
name	Atributo name nativo (lo transmite Group)	string	—	—
sx	Props rápidas de layout	SxProps	—	—

Eventos de Checkbox

Evento	Descripción	Firma del callback	Equivalente en Vue
onChange	Cambio del estado de selección (dos parámetros)	(checked: boolean, event: ChangeEvent) => void	@change

CheckboxGroup Props

Prop	Descripción	Tipo	Predeterminado
value	Array controlado de valores seleccionados	unknown[]	—
defaultValue	Valor por defecto no controlado	unknown[]	[]
disabled	Desactiva todos los elementos hijos	boolean	false
size	Tamaño de los elementos hijos	'large' | 'middle' | 'small'	Sigue ConfigProvider
name	name nativo que se transmite a los elementos hijos	string	—

Eventos de CheckboxGroup

Evento	Descripción	Firma del callback	Equivalente en Vue
onChange	Cambio del array de valores seleccionados	(value: unknown[]) => void	@change

Estado indeterminado

indeterminate se usa habitualmente para el estado intermedio de «seleccionar todo»: visualmente es una línea horizontal, pero no afecta a checked. El componente lo sincroniza con el input.indeterminate nativo dentro de useEffect.

Estilos

import '@lh-ui/react/style/checkbox'