Checkbox 多选框

用于在多个选项中选择一个或多个。

基础用法

import { Checkbox } from '@airo-ui/react'

function Demo() {
  return <Checkbox label="同意用户协议" />
}

受控与非受控

import { useState } from 'react'
import { Checkbox } from '@airo-ui/react'

function ControlledDemo() {
  const [checked, setChecked] = useState(false)
  return <Checkbox checked={checked} onChange={setChecked} label="受控模式" />
}

function UncontrolledDemo() {
  return <Checkbox defaultChecked label="非受控模式" />
}

多选组合

import { useState } from 'react'
import { Checkbox } from '@airo-ui/react'

function Demo() {
  const options = ['苹果', '香蕉', '橙子']
  const [selected, setSelected] = useState<string[]>([])

  return (
    <>
      {options.map((item) => (
        <Checkbox
          key={item}
          label={item}
          checked={selected.includes(item)}
          onChange={(checked) => {
            setSelected(
              checked
                ? [...selected, item]
                : selected.filter((v) => v !== item)
            )
          }}
        />
      ))}
    </>
  )
}

半选状态

import { Checkbox } from '@airo-ui/react'

function Demo() {
  return <Checkbox indeterminate label="半选状态" />
}

禁用

import { Checkbox } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <Checkbox disabled label="禁用的选项" />
      <Checkbox disabled checked label="禁用且选中" />
    </>
  )
}

API

Props

名称	类型	默认值	说明
checked	boolean	—	受控模式选中状态
defaultChecked	boolean	false	非受控模式默认选中状态
indeterminate	boolean	false	半选状态
disabled	boolean	false	是否禁用
label	string	—	标签文本
children	ReactNode	—	子内容
onChange	(checked: boolean) => void	—	选中状态变化时触发