Checkbox - 复选框

Demo

更新日期

2026-09-25 UTC

checkbox/demo.vue

已勾选

未勾选

半选 indeterminate

禁用

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

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

<template>
  <div class="flex flex-col gap-4">
    <div class="flex items-center gap-2">
      <YlfCheckbox v-model="a" />
      <span class="text-sm">已勾选</span>
    </div>
    <div class="flex items-center gap-2">
      <YlfCheckbox v-model="b" />
      <span class="text-sm">未勾选</span>
    </div>
    <div class="flex items-center gap-2">
      <YlfCheckbox v-model="c" />
      <span class="text-sm">半选 indeterminate</span>
    </div>
    <div class="flex items-center gap-2 op-60">
      <YlfCheckbox :model-value="true" disabled />
      <span class="text-sm">禁用</span>
    </div>
  </div>
</template>

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

Props

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