RadioGroup

一组可勾选的按钮——称为单选按钮——其中一次最多只能选中一个按钮。

View code

Default

Comfortable

Compact

功能特性

完整的键盘导航功能。
支持水平/垂直方向布局。
支持受控与非受控模式。

安装

通过命令行安装该组件。

$ npm add reka-ui

结构

导入所有部件并进行组合。

vue

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

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

API 参考

Root

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

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`defaultValue`		`AcceptableValue` The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.
`dir`		`'ltr' \| 'rtl'` The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
`disabled`	`false`	`boolean` When `true`, prevents the user from interacting with radio items.
`loop`	`true`	`boolean` When `true`, keyboard navigation will loop from last item to first, and vice versa.
`modelValue`		`AcceptableValue` The controlled value of the radio item to check. Can be binded as `v-model`.
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`orientation`		`'vertical' \| 'horizontal'` The orientation of the component.
`required`	`false`	`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.

Emit	Payload
`update:modelValue`	`[payload: string]` Event handler called when the radio group value changes

Slots (default)	Payload
`modelValue`	`null \| string \| number \| bigint \| Record<string, any>` Current input values

Data Attribute	Value
`[data-disabled]`	禁用时出现

Item

组内可被选中的项。在 form 表单中使用时，将同时渲染一个 input 元素以确保事件能正确传播。

Prop	Default	Type
`as`	`'button'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`disabled`	`false`	`boolean` When `true`, prevents the user from interacting with the radio item.
`id`		`string`
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`required`		`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.
`value`		`AcceptableValue` The value given as data when submitted with a `name`.

Emit	Payload
`select`	`[event: SelectEvent]` Event handler called when the user selects a link (via mouse or keyboard). Calling `event.preventDefault` in this handler will prevent the navigation menu from closing when selecting that link.

Slots (default)	Payload
`checked`	`boolean` Current checked state
`required`	`boolean` Required state
`disabled`	`boolean` Disabled state

Data Attribute	Value
`[data-state]`	`"checked（已选中）" \| "unchecked（未选中）"`
`[data-disabled]`	禁用时出现

Indicator

在单选按钮项处于选中状态时渲染。您可以直接为此元素设置样式，或将其用作放置图标的包装器，或两者兼用。

tip

Built with Presence component - supports any animation techniques while maintaining access to presence emitted events.

Prop	Default	Type
`as`	`'span'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`forceMount`		`boolean` Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

Data Attribute	Value
`[data-state]`	`"checked（已选中）" \| "unchecked（未选中）"`
`[data-disabled]`	禁用时出现

可访问性

遵循 Radio Group WAI-ARIA 设计模式，并使用流动标签索引（roving tabindex）来管理单选按钮项之间的焦点移动。

键盘交互

Key	Description
`Tab`	将焦点移至已选中的单选按钮或组内第一个单选按钮。
`空格键`	当焦点位于未选中的单选按钮时，将其选中。
`下箭头`	移动焦点并选中组内的下一个单选按钮。
`右箭头`	移动焦点并选中组内的下一个单选按钮。
`上箭头`	将焦点移至组内的上一个单选按钮。
`左箭头`	将焦点移至组内的上一个单选按钮。

RadioGroup ​

功能特性 ​

安装 ​

结构 ​

API 参考 ​

Root ​

Item ​

Indicator ​

可访问性 ​

键盘交互 ​