复选框

允许用户在选中和未选中之间切换的控件。

接受条款和条件。

<script setup lang="ts">
import { ref } from 'vue'
import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
import { Icon } from '@iconify/vue'

const checkboxOne = ref(true)
</script>

<template>
  <div class="flex flex-col gap-2.5">
    <label class="flex flex-row gap-4 items-center [&>.checkbox]:hover:bg-neutral-100">
      <CheckboxRoot
        v-model:checked="checkboxOne"
        class="shadow-blackA7 hover:bg-green3 flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white shadow-[0_2px_10px] outline-none focus-within:shadow-[0_0_0_2px_black]"
      >
        <CheckboxIndicator class="bg-white h-full w-full rounded flex items-center justify-center">
          <Icon
            icon="radix-icons:check"
            class="h-3.5 w-3.5 text-grass11"
          />
        </CheckboxIndicator>
      </CheckboxRoot>
      <span class="select-none text-white">Accept terms and conditions.</span>
    </label>
  </div>
</template>

功能

• 支持不确定状态。
• 完整的键盘导航。
• 可以是受控或不受控的。

安装

从命令行安装组件。

$ npm add radix-vue

结构

导入所有部分并将其组合在一起。

<script setup>
import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
</script>

<template>
  <CheckboxRoot>
    <CheckboxIndicator />
  </CheckboxRoot>
</template>

API 参考

根

包含复选框的所有部分。当在 form 中使用时，还会渲染一个 input，以确保事件正确传播。

属性	默认值	类型
as	'button'	AsTag | 组件 此组件应渲染成的元素或组件。可以被 asChild 覆盖
asChild		boolean 更改作为子元素传递的默认渲染元素，合并它们的属性和行为。 阅读我们的 组合 指南以了解更多详细信息。
checked		boolean | 'indeterminate' 复选框的受控选中状态。可以与 v-model 绑定。
defaultChecked		boolean 复选框在最初渲染时的选中状态。在您不需要控制其选中状态时使用。
disabled		boolean 当 true 时，阻止用户与复选框交互
id		string 元素的 ID
name		string 复选框的名称。与所属的表单一起提交，作为名称/值对的一部分。
required		boolean 当 true 时，表示用户必须在所属表单提交之前选中复选框。
value	'on'	string 与 name 一起提交时作为数据给出的值。

发射	有效负载
update:checked	[value: boolean] 当复选框的选中状态发生变化时调用的事件处理程序。

插槽 (默认)	有效负载
checked	false | true | 'indeterminate' 当前选中状态

数据属性	值
[data-state]	"checked" | "unchecked" | "indeterminate"
[data-disabled]	在禁用时出现

指示器

当复选框处于选中或不确定状态时渲染。您可以直接为该元素设置样式，也可以将其用作包装器以放置图标，或两者兼而有之。

属性	默认值	类型
as	'span'	AsTag | 组件 此组件应渲染成的元素或组件。可以被 asChild 覆盖
asChild		boolean 更改作为子元素传递的默认渲染元素，合并它们的属性和行为。 阅读我们的 组合 指南以了解更多详细信息。
forceMount		boolean 用于在需要更多控制时强制安装。在使用 Vue 动画库控制动画时很有用。

数据属性	值
[data-state]	"checked" | "unchecked" | "indeterminate"
[data-disabled]	在禁用时出现

示例

不确定

您可以通过控制其状态将复选框设置为 indeterminate。

<script setup>
import { Icon } from '@iconify/vue'
import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'

const checked = ref('indeterminate')
</script>

<template>
  <CheckboxRoot v-model:checked="checked">
    <CheckboxIndicator>
      <Icon
        v-if="checked === 'indeterminate'"
        icon="radix-icons:divider-horizontal"
      />
      <Icon
        v-if="checked"
        icon="radix-icons:check"
      />
    </CheckboxIndicator>
  </CheckboxRoot>

  <button
    type="button"
    @click="() => (checked === 'indeterminate' ? (checked = false) : (checked = 'indeterminate'))"
  >
    Toggle indeterminate
  </button>
</template>

无障碍

符合 三态复选框 WAI-ARIA 设计模式。

键盘交互

键	描述
空格	选中/取消选中复选框