Флажок

Множественный выбор из набора вариантов; поддерживает как самостоятельное использование, так и работу в группе LhCheckboxGroup.

Базовое использование

Одиночный и групповой

Одиночный флажок: не выбран

ТушьДаньцинПустое пространствоГунби (отключено)

Выбрано: 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)}>
        Одиночный флажок
      </LhCheckbox>

      <LhCheckboxGroup value={group} onChange={(val) => setGroup(val as string[])}>
        <LhCheckbox value="ink">Тушь</LhCheckbox>
        <LhCheckbox value="danqing">Даньцин</LhCheckbox>
        <LhCheckbox value="blank">Пустота</LhCheckbox>
      </LhCheckboxGroup>
    </>
  )
}

Props компонента Checkbox

Проп	Описание	Тип	Допустимые значения	По умолчанию
value	Значение варианта (действует внутри Group)	unknown	—	—
checked	Контролируемое состояние выбора (при самостоятельном использовании)	boolean	—	—
defaultChecked	Неконтролируемое значение по умолчанию	boolean	—	false
label	Отображаемый текст	string	—	—
disabled	Отключено	boolean	—	false
indeterminate	Промежуточное состояние (только визуально, не порождает значение)	boolean	—	false
size	Размер	'large' | 'middle' | 'small'	—	Из ConfigProvider
name	Нативный атрибут name (передаётся через Group)	string	—	—
sx	Сокращение для макета	SxProps	—	—

События Checkbox

Событие	Описание	Сигнатура обратного вызова	Аналог во Vue
onChange	Изменение состояния выбора (два параметра)	(checked: boolean, event: ChangeEvent) => void	@change

Props компонента CheckboxGroup

Проп	Описание	Тип	По умолчанию
value	Контролируемый массив выбранных значений	unknown[]	—
defaultValue	Неконтролируемое значение по умолчанию	unknown[]	[]
disabled	Отключить все дочерние элементы	boolean	false
size	Размер дочерних элементов	'large' | 'middle' | 'small'	Из ConfigProvider
name	Нативный name, передаваемый дочерним элементам	string	—

События CheckboxGroup

Событие	Описание	Сигнатура обратного вызова	Аналог во Vue
onChange	Изменение массива выбранных значений	(value: unknown[]) => void	@change

Промежуточное состояние

indeterminate часто используется для промежуточного состояния «выбрать всё»: визуально это горизонтальная черта, но она не влияет на checked. Компонент синхронизирует значение с нативным input.indeterminate внутри useEffect.

Стили

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