Case à cocher

Permet la sélection multiple au sein d'un groupe d'options ; prend en charge l'usage isolé ainsi que la combinaison avec LhCheckboxGroup.

Utilisation de base

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)}>
        Case à cocher isolée
      </LhCheckbox>

      <LhCheckboxGroup value={group} onChange={(val) => setGroup(val as string[])}>
        <LhCheckbox value="ink">Encre</LhCheckbox>
        <LhCheckbox value="danqing">Danqing</LhCheckbox>
        <LhCheckbox value="blank">Blanc laissé</LhCheckbox>
      </LhCheckboxGroup>
    </>
  )
}

Checkbox Props

Prop	Description	Type	Options	Valeur par défaut
value	Valeur de l'option (active au sein d'un Group)	`unknown`	—	—
checked	État contrôlé (usage isolé)	`boolean`	—	—
defaultChecked	Cochée par défaut en mode non contrôlé	`boolean`	—	`false`
label	Texte affiché	`string`	—	—
disabled	Désactivée	`boolean`	—	`false`
indeterminate	État indéterminé (effet visuel uniquement, ne produit pas de valeur)	`boolean`	—	`false`
size	Taille	`'large' \| 'middle' \| 'small'`	—	Selon ConfigProvider
name	Attribut `name` natif (transmis par le Group)	`string`	—	—
sx	Raccourci de mise en page	`SxProps`	—	—

Événements de Checkbox

Événement	Description	Signature du rappel	Équivalent Vue
onChange	Changement d'état de la case (deux paramètres)	`(checked: boolean, event: ChangeEvent) => void`	`@change`

CheckboxGroup Props

Prop	Description	Type	Valeur par défaut
value	Tableau contrôlé des valeurs cochées	`unknown[]`	—
defaultValue	Valeurs par défaut en mode non contrôlé	`unknown[]`	`[]`
disabled	Désactive tous les enfants	`boolean`	`false`
size	Taille des enfants	`'large' \| 'middle' \| 'small'`	Selon ConfigProvider
name	Attribut `name` natif transmis aux enfants	`string`	—

Événements de CheckboxGroup

Événement	Description	Signature du rappel	Équivalent Vue
onChange	Changement du tableau des valeurs cochées	`(value: unknown[]) => void`	`@change`

État indéterminé

indeterminate est souvent utilisé pour l'état intermédiaire de « tout sélectionner » : visuellement il s'agit d'un trait horizontal, mais cela n'affecte pas checked. Le composant le synchronise sur l'input natif via useEffect.

Styles

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

Utilisation de base​

Checkbox Props​

Événements de Checkbox​

CheckboxGroup Props​

Événements de CheckboxGroup​

Styles​