Checkbox 复选框

受控多选控件——20×20 盒子，未选透明描边、已选主橙实心 + 白勾、禁用半透明。shape='circle' 切圆形,用于需要强调的必勾项(如协议同意)。

实时预览

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

单个

多项 · 选客户

已选：2 / 4

状态

状态	视觉
未选	20×20 盒子,1.5px 描边 c.outline,透明背景
已选	20×20 c.primary 背景 + c.onPrimary 白勾(check,strokeWidth 2.5)
禁用	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: boolean) => void	—	状态变更回调,传入新的 checked 值
label	string	—	旁标文字(不传则只渲染勾选盒子)
shape	'square' | 'circle'	'square'	形状;'circle' 用于强调的必勾项(如协议同意)
disabled	boolean	false	禁用
testID	string	—	E2E / 测试定位

主题键（Tokens）

Token	来源	作用
c.outline	useColors()	未选盒子描边色
c.primary	useColors()	已选盒子填充 + 边框色
c.onPrimary	useColors()	白勾(check icon)色
c.foreground	useColors()	label 文字色
radius.xs	@unif/react-native-design	方形盒子圆角(4)
space['4']	@unif/react-native-design	盒子↔label 间距(10)
type.sm	@unif/react-native-design	label 字号

无障碍（a11y）

来源：src/components/ui/Checkbox/Checkbox.tsx、types.ts。

• 默认 accessibilityRole：'checkbox'（在 <Pressable> 上硬编码）。
• a11y props：accessibilityLabel 取自 label，但 label 是可选的 —— 不传 label 时（仅渲染勾选方框）无朗读文案，此时应由外部上下文或包裹元素提供语义。
• 状态语义：accessibilityState={{ checked, disabled: !!disabled }} —— checked 直接映射受控的 checked prop，disabled 映射 disabled prop。

// label 同时作为 SR 朗读文案
<Checkbox checked={agree} onChange={setAgree} label="同意服务条款" />