Radio Group 单选组

一组可选中的按钮（单选按钮），同一时间最多只能选中一个。

基础用法

@Local density: string = 'comfortable';

SRadioGroup({ value: this.density!! }) {
  SRadioGroupItem({ value: 'default', label: 'Default' })
  SRadioGroupItem({ value: 'comfortable', label: 'Comfortable' })
  SRadioGroupItem({ value: 'compact', label: 'Compact' })
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

横向与禁用

orientation：'vertical' | 'horizontal'

SRadioGroup({ defaultValue: 'card', orientation: 'horizontal' }) {
  SRadioGroupItem({ value: 'card', label: 'Card' })
  SRadioGroupItem({ value: 'paypal', label: 'PayPal' })
  SRadioGroupItem({ value: 'apple', label: 'Apple Pay', disabled: true })
}
SRadioGroup({ defaultValue: 'a', disabled: true }) { ... }

网页近似预览，真机效果以 HarmonyOS 渲染为准。

选项卡片与尺寸

card + description 可以做成套餐选择器。

SRadioGroup({ value: this.plan!! }) {
  SRadioGroupItem({ value: 'starter', label: 'Starter', description: 'For side projects · $0', card: true })
  SRadioGroupItem({ value: 'pro', label: 'Pro', description: 'For growing teams · $20 / month', card: true })
  SRadioGroupItem({ value: 'enterprise', label: 'Enterprise', description: 'Custom contracts', card: true })
}
SRadioGroup({ defaultValue: 'lg', orientation: 'horizontal' }) {
  SRadioGroupItem({ value: 'sm', label: 'Small', sizing: 'sm' })
  SRadioGroupItem({ value: 'lg', label: 'Large', sizing: 'lg' })
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SRadioGroup

shadcn-vue 的 RadioGroup（grid gap-3）。

属性	类型	默认值	说明
value!!	string | undefined	undefined	受控值（配合 !! 使用）。留空则为非受控。
defaultValue	string	''
orientation	RadioGroupOrientation RadioGroupOrientation = 'vertical' | 'horizontal'	'vertical'
disabled	boolean	false

事件	类型	默认值	说明
onValueChange	(v: string) => void	() => { }

插槽: 子组件（尾随闭包）

SRadioGroupItem

shadcn-vue 的 RadioGroupItem：size-4 rounded-full border border-input shadow-xs dark:bg-input/30，选中的项显示 size-2 的主色圆点。可选的 label 也属于点击区域（flex items-center gap-3）。

变体：sizing 取 sm | default | lg；description（标签下方的弱化文字）；card（带边框、可按下的选择卡片，选中时高亮——例如套餐选择器）。

属性	类型	默认值	说明
value	string	''
label	ResourceStr | undefined	undefined
disabled	boolean	false
invalid	boolean	false
description	ResourceStr | undefined	undefined	标签下方弱化的辅助文字。
sizing	ChoiceSize ChoiceSize = 'sm' | 'default' | 'lg'	'default'
card	boolean	false	包裹单选按钮、标签与描述的带边框选择卡片。