checkbox.md
组件 · COMPONENT

复选框 Checkbox

16px 方框、圆角 4。选中是墨底白勾，未选是 1.5px 描边；文字随状态从灰变深。

来源提炼自 AdmDesign 样张 · ui 为源源Checkbox.jsx源extracted.css机读components/checkbox.md
点一下试试
import { useState } from 'react'
import { Checkbox } from './extracted/Checkbox.jsx'

export default function CheckboxDemo() {
  const [a, setA] = useState(true)
  const [b, setB] = useState(false)
  return (
    <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap', alignItems: 'center' }}>
      <Checkbox checked={a} onChange={setA} label="已选复选框" />
      <Checkbox checked={b} onChange={setB} label="未选" />
    </div>
  )
}
两种状态
import { Checkbox } from './extracted/Checkbox.jsx'

export function States() {
  return (
    <>
      <Checkbox checked label="已选复选框" />
      <Checkbox label="未选" />
    </>
  )
}

属性

属性取值默认说明
checkedbooleanfalse是否选中（受控）
onChange(next: boolean) => void—切换回调
labelstring—右侧文字；整行都是点击目标
disabledbooleanfalse禁用