Skip to content

Checkbox

可组合的复选框运行时:Root 持有 checked,Indicator 只负责选中时的渲染。

运行时

状态契约由 @varo-ui/headless 提供;渲染 Parts 分别来自 @varo-ui/h5/primitives@varo-ui/weapp/primitives

演示

安装包@varo-ui/headless

安装

bash
pnpm add @varo-ui/headless @varo-ui/h5
# 或
pnpm add @varo-ui/headless @varo-ui/weapp

基础用法

通过上方演示面板切换 H5 实时预览,以及小程序运行时契约/代码。

禁用态

传入 disabled 后不再触发 checkedChange。Indicator 仍可根据当前 checked 渲染,但交互关闭。

Parts

Part作用
CheckboxRoot状态与点击切换
CheckboxIndicator选中时渲染的指示器

Props

Prop类型默认值描述
checkedboolean | undefinedundefined受控选中态
defaultCheckedbooleanfalse非受控初始选中态
disabledbooleanfalse禁用交互
asstring'button'根节点标签

Events

EventPayload描述
update:checkedboolean受控同步选中态
checkedChangeboolean选中态变化

无障碍

  • Root 默认以 button 语义承载切换。
  • Indicator 不单独承接点击。
  • disabled 时不应触发 checked 变化。

平台说明

  • H5 可在文档中实时预览。
  • 小程序保持相同 v-model:checked 与 part 组合;焦点细节由页面容器处理。

相关文档