Checkbox 复选框

多选控件——20×20 方框，未选透明描边、已选主橙实心 + 白勾、禁用半透明。

实时预览

下方渲染的就是 src/components/ui/Checkbox/Checkbox.tsx 本体，通过 react-native-web 翻译成浏览器节点。

单个

同意接收提醒

禁用 · 已选

禁用 · 未选

多项 · 选客户

东方便利店

明珠超市

优家便利

悦家

已选：2 / 4

状态

状态	视觉
未选	20×20 方框，1.5px 描边 #EDEDED，透明背景
已选	20×20 主橙背景 + 白勾
禁用	opacity: 0.5

用法

import { Checkbox } from '@unif/react-native-design';

<Checkbox checked={agree} onChange={setAgree} label="同意服务条款" />

{/* 多项选择 */}
{customers.map(c => (
  <Checkbox
    key={c.id}
    checked={picked.includes(c.id)}
    onChange={() => togglePick(c.id)}
    label={c.name}
  />
))}

API

Prop	Type	说明
checked	boolean	当前是否选中
onChange	(checked) => void	状态变更回调
label	string	右侧文字
disabled	boolean?	禁用