Checkbox 多选框

多选框用于在一组选项中进行多项选择，支持选中、未选中和不确定三种状态。

引入

import { Checkbox } from 'kitty-react';

基础用法

import React, { useState } from 'react';
import { Checkbox } from 'kitty-react';

function BasicCheckbox() {
  const [checked, setChecked] = useState(false);

  return (
    <div className="space-y-4">
      <Checkbox
        checked={checked}
        onChange={(e) => setChecked(e.target.checked)}
        label="基础多选框"
      />
      <Checkbox
        checked={checked}
        onChange={(e) => setChecked(e.target.checked)}
        label="带描述的多选框"
        description="这是一个带有描述信息的多选框"
      />
    </div>
  );
}

不同尺寸

多选框提供三种尺寸：小号 (sm)、中号 (md) 和大号 (lg)。

<div className="space-y-4">
  <Checkbox size="sm" label="小号多选框" />
  <Checkbox size="md" label="中号多选框" />
  <Checkbox size="lg" label="大号多选框" />
</div>

不同颜色

多选框支持多种颜色主题。

<div className="space-y-4">
  <Checkbox color="blue" defaultChecked label="蓝色多选框" />
  <Checkbox color="green" defaultChecked label="绿色多选框" />
  <Checkbox color="red" defaultChecked label="红色多选框" />
  <Checkbox color="gray" defaultChecked label="灰色多选框" />
</div>

不同状态

多选框支持禁用、不确定和错误状态。

<div className="space-y-4">
  <Checkbox disabled label="禁用状态" />
  <Checkbox disabled defaultChecked label="禁用且选中状态" />
  <Checkbox
    indeterminate={true}
    label="不确定状态"
    description="用于表示部分选中的状态"
  />
  <Checkbox
    error
    label="错误状态"
    errorMessage="这是一个错误信息"
  />
</div>

多选框组

实现全选功能和分组选择。

import React, { useState } from 'react';
import { Checkbox } from 'kitty-react';

function CheckboxGroup() {
  const [selectedItems, setSelectedItems] = useState([]);
  const items = [
    { id: 'apple', label: '苹果', description: '红色的水果' },
    { id: 'banana', label: '香蕉', description: '黄色的水果' },
    { id: 'orange', label: '橙子', description: '橙色的水果' },
  ];

  const allSelected = selectedItems.length === items.length;
  const someSelected = selectedItems.length > 0 && selectedItems.length < items.length;

  return (
    <div className="space-y-4">
      <Checkbox
        checked={allSelected}
        indeterminate={someSelected}
        onChange={(e) => handleSelectAll(e.target.checked)}
        label="全选"
      />
      <div className="ml-6 space-y-2">
        {items.map((item) => (
          <Checkbox
            key={item.id}
            checked={selectedItems.includes(item.id)}
            onChange={(e) => handleItemChange(item.id, e.target.checked)}
            label={item.label}
            description={item.description}
          />
        ))}
      </div>
    </div>
  );
}

API

Checkbox Props

属性	类型	默认值	说明
size	'sm' | 'md' | 'lg'	'md'	多选框尺寸
color	'blue' | 'green' | 'red' | 'gray'	'blue'	多选框颜色
disabled	boolean	false	是否禁用
indeterminate	boolean	false	是否为不确定状态
label	React.ReactNode	-	标签文本
description	React.ReactNode	-	描述文本
error	boolean	false	是否为错误状态
errorMessage	string	-	错误信息
className	string	-	容器自定义样式类
labelClassName	string	-	标签自定义样式类
checkboxClassName	string	-	多选框自定义样式类

其他属性继承自 HTML input 元素的属性。