Checkbox - 复选框

更新日期

2026-10-04 UTC

Demo

checkbox/demo.vue

已勾选

未勾选

半选 indeterminate

禁用

<script setup lang="ts">
import { ref, useId } from 'vue'

const a = ref(true)
const b = ref(false)
const c = ref<boolean | 'indeterminate'>('indeterminate')
const id = useId()
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex items-center gap-2">
      <YlfCheckbox :id="`${id}-checked`" v-model="a" />
      <label :for="`${id}-checked`" class="text-sm">已勾选</label>
    </div>
    <div class="flex items-center gap-2">
      <YlfCheckbox :id="`${id}-unchecked`" v-model="b" />
      <label :for="`${id}-unchecked`" class="text-sm">未勾选</label>
    </div>
    <div class="flex items-center gap-2">
      <YlfCheckbox :id="`${id}-mixed`" v-model="c" />
      <label :for="`${id}-mixed`" class="text-sm">半选 indeterminate</label>
    </div>
    <div class="flex items-center gap-2 op-60">
      <YlfCheckbox :id="`${id}-disabled`" :model-value="true" disabled />
      <label :for="`${id}-disabled`" class="text-sm">禁用</label>
    </div>
  </div>
</template>

复选框：行为与可访问性基于 reka-ui（role="checkbox"、键盘、indeterminate 三态），外观使用共享主题 token。

Props

属性	说明	类型	默认值
v-model	勾选状态	boolean | 'indeterminate'	false
value	表单提交值	string	—
disabled	禁用	boolean	false

每个复选框必须有可访问名称：传入 aria-label="同意服务条款"，或通过 id 与 <label for> 关联。旁边的普通 <span> 不会自动成为标签。name 和 required 透传给 Reka UI；置于原生表单时，勾选值进入 FormData，禁用项不提交。