@ug666/react 文档演示

Radio 单选框

Radio 与 RadioGroup 配合使用，管理一组互斥选项的选中状态，支持垂直/水平排列、禁用与三种尺寸。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Radio, RadioGroup } from '@ug666/react'

基础单选组（垂直）

RadioGroup 默认垂直排列，通过 onValueChange 获取当前选中值。

免费版 — 每月 1000 次调用专业版 — 每月 50000 次调用企业版 — 无限制调用

当前选择：pro

水平排列

设置 orientation="horizontal" 可让子项横向排列，适合选项数量少的场景。

ReactVueSvelte

当前选择：vue

三种尺寸

sm / default / lg 适配不同密度界面。

小号 sm

默认 default

大号 lg

代码示例

套餐选择典型业务场景。

import { useState } from 'react'
import { Radio, RadioGroup } from '@ug666/react'

export function PlanSelector() {
  const [plan, setPlan] = useState('pro')

  return (
    <div className="space-y-3">
      <p className="text-sm font-medium text-text-primary">选择套餐</p>
      <RadioGroup value={plan} onValueChange={setPlan} orientation="vertical">
        <Radio value="free" label="免费版 — 每月 1000 次调用" />
        <Radio value="pro" label="专业版 — 每月 50000 次调用" />
        <Radio value="enterprise" label="企业版 — 无限制调用" />
      </RadioGroup>
      <p className="text-xs text-text-secondary">当前选择：{plan}</p>
    </div>
  )
}

Props 说明