Checkbox 多選框

一組備選項中進行多選，支援單個使用與 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>
    </>
  )
}

Checkbox Props

屬性	說明	型別	可選值	預設值
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

CheckboxGroup Props

屬性	說明	型別	預設值
value	受控選中值陣列	unknown[]	—
defaultValue	非受控預設值	unknown[]	[]
disabled	停用全部子項	boolean	false
size	子項尺寸	'large' | 'middle' | 'small'	跟隨 ConfigProvider
name	透傳給子項的原生 name	string	—

CheckboxGroup 事件

事件	說明	回呼簽名	Vue 對照
onChange	選中值陣列變化	(value: unknown[]) => void	@change

半選狀態

indeterminate 常用於「全選」中間態：視覺上是橫線，但不會影響 checked。元件在 useEffect 內同步到原生 input.indeterminate。

樣式

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