Radio Group

A set of checkable buttons, known as radio buttons, where no more than one can be checked at a time.

Usage

@Local density: string = 'comfortable';

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

Approximate web preview — the HarmonyOS rendering is the reference.

Horizontal & disabled

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 }) { ... }

Approximate web preview — the HarmonyOS rendering is the reference.

Choice cards & sizes

card + description make a plan picker.

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' })
}

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SRadioGroup

shadcn-vue RadioGroup (grid gap-3).

Prop	Type	Default	Description
value!!	string | undefined	undefined	Controlled value (use with !!). Leave undefined for uncontrolled.
defaultValue	string	''
orientation	RadioGroupOrientation RadioGroupOrientation = 'vertical' | 'horizontal'	'vertical'
disabled	boolean	false

Event	Type	Default	Description
onValueChange	(v: string) => void	() => { }

Slots: children (trailing closure)

SRadioGroupItem

shadcn-vue RadioGroupItem: size-4 rounded-full border border-input shadow-xs dark:bg-input/30, the selected item shows a size-2 primary dot. The optional label is part of the tap target (flex items-center gap-3).

Variants: sizing sm | default | lg, description (muted text under the label) and card (a bordered, pressable choice card, highlighted while selected — e.g. plan pickers).

Prop	Type	Default	Description
value	string	''
label	ResourceStr | undefined	undefined
disabled	boolean	false
invalid	boolean	false
description	ResourceStr | undefined	undefined	Muted helper text under the label.
sizing	ChoiceSize ChoiceSize = 'sm' | 'default' | 'lg'	'default'
card	boolean	false	Bordered choice card around the radio, label and description.