UG666

UG666 UI
@ug666/react 文档演示

Checkbox 复选框

Checkbox 用于在表单中进行多项选择，支持受控/非受控模式、indeterminate 半选状态与三种尺寸。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Checkbox } from '@ug666/react'

基础勾选

最基础的复选框，携带标签并受控绑定选中状态。

indeterminate 半选

父级复选框在子项部分选中时呈现半选中状态（Minus 图标），全选时呈现选中状态。

禁用状态

禁用后不可点击，透明度降低以示区别。

三种尺寸

sm / default / lg 三档尺寸适配不同密度界面。

代码示例

全选 + 子项联动的典型业务场景。

import { useState } from 'react'
import { Checkbox } from '@ug666/react'

export function TaskList() {
  const [items, setItems] = useState([
    { id: 1, label: '设计稿评审', checked: true },
    { id: 2, label: '接口联调', checked: false },
    { id: 3, label: '文档补全', checked: false },
  ])

  const allChecked = items.every((i) => i.checked)
  const someChecked = items.some((i) => i.checked) && !allChecked

  function toggleAll() {
    setItems((prev) => prev.map((i) => ({ ...i, checked: !allChecked })))
  }

  function toggle(id: number) {
    setItems((prev) =>
      prev.map((i) => (i.id === id ? { ...i, checked: !i.checked } : i)),
    )
  }

  return (
    <div className="space-y-2">
      <Checkbox
        checked={allChecked}
        indeterminate={someChecked}
        onCheckedChange={toggleAll}
        label="全选任务"
      />
      <div className="ml-6 space-y-1.5">
        {items.map((item) => (
          <Checkbox
            key={item.id}
            checked={item.checked}
            onCheckedChange={() => toggle(item.id)}
            label={item.label}
          />
        ))}
      </div>
    </div>
  )
}

Props 说明

属性类型默认值说明
checkedbooleanfalse是否选中（受控）。
indeterminatebooleanfalse半选状态，优先级高于 checked 的视觉表现。
onCheckedChange(checked: boolean) => void—选中状态变化时触发。
labelReactNode—同行标签文案，有值时整块可点击。
size'sm' | 'default' | 'lg''default'控制复选框尺寸。
disabledbooleanfalse禁用点击与焦点交互。