单选按钮组

一组可选择的按钮——即单选按钮——在同一时间只能选择其中一个。

查看代码

默认

舒适

紧凑

特性

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

安装

从命令行安装此组件。

$ npm add reka-ui

结构

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

vue

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

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

API 参考

根

包含单选按钮组的所有部分。

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

事件触发	载荷
`update:modelValue`	`[载荷: 字符串]` 当单选按钮组值改变时调用的事件处理函数

插槽（默认）	载荷
`modelValue`	`null \| string \| number \| bigint \| Record<string, any>` 当前输入值

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

项

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

属性	默认	类型
`as`	`'button'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。
`disabled`	`false`	`布尔值` 当为 `true` 时，阻止用户与单选按钮项交互。
`id`		`string`
`name`		`string` 字段的名称。随其所属的表单一起作为名称/值对提交。
`required`		`布尔值` 当为 `true` 时，表示用户必须在所属表单提交前设置值。
`value`		`AcceptableValue` 与 `name` 一起提交时作为数据给出的值。

事件触发	载荷
`select`	`[event: SelectEvent]` 当用户通过鼠标或键盘选择链接时调用的事件处理函数。在此处理函数中调用 `event.preventDefault` 将阻止导航菜单在选择该链接时关闭。

插槽（默认）	载荷
`checked`	`布尔值` 当前选中状态
`required`	`布尔值` 必填状态
`disabled`	`布尔值` 禁用状态

数据属性	值
`[data-state]`	`"选中" \| "未选中"`
`[data-disabled]`	禁用时存在

指示器

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

提示

使用 Presence 组件构建 - 支持任何动画技术，同时保持对 Presence 发出事件的访问。

属性	默认	类型
`as`	`'span'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。
`forceMount`		`布尔值` 当需要更多控制时，用于强制挂载。在与 Vue 动画库控制动画时很有用。

数据属性	值
`[data-state]`	`"选中" \| "未选中"`
`[data-disabled]`	禁用时存在

可访问性

遵循单选按钮组 WAI-ARIA 设计模式并使用 roving tabindex 来管理单选按钮项之间的焦点移动。

键盘交互

键	描述
`Tab`	将焦点移动到选中的单选按钮项或组中的第一个单选按钮项。
`空格键`	当焦点位于未选中的单选按钮项上时，选中它。
`向下箭头键`	将焦点移动并选中组中的下一个单选按钮项。
`向右箭头`	将焦点移动并选中组中的下一个单选按钮项。
`向上箭头键`	将焦点移动到组中的上一个单选按钮项。
`向左箭头`	将焦点移动到组中的上一个单选按钮项。

单选按钮组 ​

特性 ​

安装 ​

结构 ​

API 参考 ​

根 ​

项 ​

指示器 ​

可访问性 ​

键盘交互 ​

单选按钮组

特性

安装

结构

API 参考

根

项

指示器

可访问性

键盘交互