Lzh on GitHub

RadioGroup

一组可选中的按钮（称为单选按钮），其中一次只能选中一个按钮。
<script setup lang="ts">
import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from 'reka-ui'
import { ref } from 'vue'

const radioStateSingle = ref('default')
</script>

<template>
  <RadioGroupRoot
    v-model="radioStateSingle"
    class="flex flex-col gap-2.5"
    default-value="default"
    aria-label="View density"
  >
    <div class="flex items-center">
      <RadioGroupItem
        id="r1"
        class="bg-white w-[1.125rem] h-[1.125rem] rounded-full border data-[active=true]:border-stone-700 data-[active=true]:bg-stone-700 dark:data-[active=true]:bg-white shadow-sm focus:shadow-[0_0_0_2px] focus:shadow-stone-700 outline-none cursor-default"
        value="default"
      >
        <RadioGroupIndicator
          class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-2 after:h-2 after:rounded-[50%] after:bg-white dark:after:bg-stone-700"
        />
      </RadioGroupItem>
      <label
        class="text-stone-700 dark:text-white text-sm leading-none pl-[15px]"
        for="r1"
      >
        Default
      </label>
    </div>
    <div class="flex items-center">
      <RadioGroupItem
        id="r2"
        class="bg-white w-[1.125rem] h-[1.125rem] rounded-full border data-[active=true]:border-stone-700 data-[active=true]:bg-stone-700 dark:data-[active=true]:bg-white shadow-sm focus:shadow-[0_0_0_2px] focus:shadow-stone-700 outline-none cursor-default"
        value="comfortable"
      >
        <RadioGroupIndicator
          class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-2 after:h-2 after:rounded-[50%] after:bg-white dark:after:bg-stone-700"
        />
      </RadioGroupItem>
      <label
        class="text-stone-700 dark:text-white text-sm leading-none pl-[15px]"
        for="r2"
      >
        Comfortable
      </label>
    </div>
    <div class="flex items-center">
      <RadioGroupItem
        id="r3"
        class="bg-white w-[1.125rem] h-[1.125rem] rounded-full border data-[active=true]:border-stone-700 data-[active=true]:bg-stone-700 dark:data-[active=true]:bg-white shadow-sm focus:shadow-[0_0_0_2px] focus:shadow-stone-700 outline-none cursor-default"
        value="compact"
      >
        <RadioGroupIndicator
          class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-2 after:h-2 after:rounded-[50%] after:bg-white dark:after:bg-stone-700"
        />
      </RadioGroupItem>
      <label
        class="text-stone-700 dark:text-white text-sm leading-none pl-[15px]"
        for="r3"
      >
        Compact
      </label>
    </div>
  </RadioGroupRoot>
</template>

特性 (Features)

  • 完整的键盘导航。
  • 支持水平/垂直方向。
  • 可控或非控。

安装 (Installation)

从命令行安装组件。

$ npm add reka-ui

结构 (Anatomy)

导入所有部件并组装它们。

<script setup>
import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from 'reka-ui'
</script>

<template>
  <RadioGroupRoot>
    <RadioGroupItem>
      <RadioGroupIndicator />
    </RadioGroupItem>
  </RadioGroupRoot>
</template>

API 参考 (API Reference)

根 (Root)

包含单选组的所有部分。

属性默认值类型描述
as'div'AsTag | Component此组件应渲染为的元素或组件。可通过 asChild 覆盖。
asChildboolean将默认渲染的元素替换为作为子元素传递的元素，合并它们的 props 和行为。阅读我们的组合指南了解更多详情。
defaultValueAcceptableValue初始渲染时应选中的单选项目的值。当您不需要控制单选项目状态时使用。
dir'ltr' | 'rtl'组合框的阅读方向（如果适用）。如果省略，则全局继承自 ConfigProvider 或假定为 LTR（从左到右）阅读模式。
disabledfalseboolean当 true 时，阻止用户与单选项目交互。
looptrueboolean当 true 时，键盘导航将从最后一项循环到第一项，反之亦然。
modelValueAcceptableValue要检查的单选项目的受控值。可以通过 v-model 绑定。
namestring字段的名称。作为名称/值对的一部分随其所属的表单一起提交。
orientation'vertical' | 'horizontal'组件的方向。
requiredfalseboolean当 true 时，表示用户必须在提交所属表单之前设置值。

发送事件

事件名称Payload描述
update:modelValue[payload: string]单选组值更改时调用的事件处理程序

默认插槽

插槽参数插槽参数类型描述
modelValuenull | string | number | bigint | Record<string, any>当前输入值

数据属性 (Data Attributes)

数据属性值
[data-disabled]禁用时存在

项目 (Item)

组中可被选中的项目。当在 form 中使用时，也会渲染一个 input 以确保事件正确传播。

属性默认值类型描述
as'button'AsTag | Component此组件应渲染为的元素或组件。可通过 asChild 覆盖。
asChildboolean将默认渲染的元素替换为作为子元素传递的元素，合并它们的 props 和行为。阅读我们的组合指南了解更多详情。
disabledfalseboolean当 true 时，阻止用户与单选项目交互。
idstring
namestring字段的名称。作为名称/值对的一部分随其所属的表单一起提交。
requiredboolean当 true 时，表示用户必须在提交所属表单之前设置值。
valueAcceptableValue作为数据提交时随 name 提交的值。

发送事件

事件Payload描述
select[event: SelectEvent]用户选择链接（通过鼠标或键盘）时调用的事件处理程序。在此处理程序中调用 event.preventDefault 将阻止在选择该链接时关闭导航菜单。

默认插槽

插槽参数插槽参数类型描述
checkedboolean当前选中状态
requiredboolean必填状态
disabledboolean禁用状态

数据属性 (Data Attributes)

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

指示器 (Indicator)

当单选项目处于选中状态时渲染。您可以直接样式化此元素，也可以将其用作包装器以放置图标，或两者兼而有之。

使用 Presence 组件构建 - 支持任何动画技术同时保持对 Presence 发出的事件的访问。
属性默认值类型描述
as'span'AsTag | Component此组件应渲染为的元素或组件。可通过 asChild 覆盖。
asChildboolean将默认渲染的元素替换为作为子元素传递的元素，合并它们的 props 和行为。阅读我们的组合指南了解更多详情。
forceMountboolean当需要更多控制时用于强制挂载。在与 Vue 动画库一起控制动画时很有用。

数据属性 (Data Attributes)

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

可访问性 (Accessibility)

遵循 单选组 WAI-ARIA 设计模式 并使用 漫游 Tab 键 来管理单选项目之间的焦点移动。

键盘交互 (Keyboard Interactions)

按键描述
Tab将焦点移动到已选中的单选项目或组中的第一个单选项目。
Space当焦点在未选中的单选项目上时，选中它。
ArrowDown将焦点移动并选中组中的下一个单选项目。
ArrowRight将焦点移动并选中组中的下一个单选项目。
ArrowUp将焦点移动到组中的上一个单选项目。
ArrowLeft将焦点移动到组中的上一个单选项目。