Radio 单选框

一组可检查的按钮（称为单选按钮），一次只能选中其中一个。基于 BrConfigProvider 进行全局主题配置。

基础用法

最基本的单选按钮用法，通常与 BrRadioGroup 一起使用。

Default

Comfortable

Compact

Example

禁用状态

设置 disabled 属性以禁用单选按钮。

Option One

Option Two (Disabled)

Option Three

Example

尺寸

我们提供了一组默认尺寸。你可以通过 size 属性控制单选按钮的大小。支持 xs, sm, md (默认), lg, xl, 2xl。

Extra Small (xs)

Small (sm)

Default

Medium (md)

Large (lg)

Extra Large (xl)

2x Large (2xl)

Example

水平布局

设置 orientation="horizontal" 属性以水平排列单选组。

Default

Comfortable

Compact

Example

主题定制

全局定制 (BrConfigProvider)

你可以通过 BrConfigProvider 的 theme 属性覆盖默认 CSS 变量，以自定义颜色、圆角等。

Custom Theme (Violet)

Light Mode

Dark Mode

System

Example

局部定制 (TailwindCSS)

你可以直接在组件上使用 TailwindCSS 工具类来覆盖样式。

<template>
  <BrRadio class="border-red-500" label="Error State" />
</template>

API

BrRadio

Props

属性名	类型	默认值	说明
value	string | number | boolean	-	必填。单选按钮的值
disabled	boolean	false	是否禁用单选按钮
label	string	undefined	标签文本
id	string	undefined	输入框 ID
name	string	undefined	输入框名称
required	boolean	false	是否必填
error	boolean	false	是否处于错误状态
size	'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'default'	'default'	单选按钮的尺寸

Emits

事件名	说明	参数
update:modelValue	更新绑定值	(value: string | number | boolean)
change	变更事件	(value: string | number | boolean)

Slots

插槽名	说明
default	标签内容

BrRadioGroup

Props

属性名	类型	默认值	说明
modelValue	string | number | boolean	undefined	绑定值
disabled	boolean	false	是否禁用整个组
orientation	'horizontal' | 'vertical'	'vertical'	布局方向
size	'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'default'	'default'	组内所有单选按钮的尺寸
name	string	undefined	所有单选按钮的 name 属性
required	boolean	false	是否必填
loop	boolean	true	是否循环键盘导航

Emits

事件名	说明	参数
update:modelValue	更新绑定值	(value: string | number | boolean)
change	变更事件	(value: string | number | boolean)