'use client' import { RadioGroup, RadioGroupItem } from '@anker-in/headless-ui' import { useState } from 'react' function RadioDemo() { const [basicValue, setBasicValue] = useState('option1') const [sizeValue, setSizeValue] = useState('medium') const [planValue, setPlanValue] = useState('pro') const [notificationValue, setNotificationValue] = useState('email') return (

{/* 基础用法 */}

基础用法

选择您的偏好设置：

选项 1 - 推荐设置选项 2 - 自定义设置选项 3 - 高级设置选项 4 - 禁用选项

当前选择：{basicValue}

{/* 不同尺寸 */}

不同尺寸

{/* 小尺寸 */}

小尺寸 (sm)

小尺寸选项紧凑模式

{/* 中等尺寸 */}

标准尺寸 (base)

标准尺寸选项正常模式

{/* 大尺寸 */}

大尺寸 (lg)

大尺寸选项舒适模式

{/* 订阅计划选择 */}

订阅计划选择

免费计划

基础功能，适合个人使用

￥0/月

专业计划推荐

高级功能，适合团队协作

￥99/月

企业计划

完整功能，适合大型团队

￥299/月

{/* 通知设置 */}

通知设置

选择接收通知的方式：

📧

邮件通知

通过邮箱接收重要通知

📱

短信通知

通过手机短信接收通知

🔔

推送通知

通过应用内推送接收通知

🔕

关闭通知

不接收任何通知

{/* 水平布局 */}

水平布局

选择您的性别：

男女不愿透露

) }

Radio

基本用法