RadioGroup

Interactive documentation for RadioGroup and RadioGroupItem. Change props in the playground, inspect sizes, colors, orientation, slots, and events.

selected: opt-1

Preview

Example *

Option 1

This is a description

Option 2

This is a description

Option 3

This is a description

Code

<RadioGroup
  v-model="selected"
  :items="items"
  label="Example"
  required
/>

Sizes

All available RadioGroup sizes.

xs

Option 1

This is a description

s

Option 1

This is a description

m

Option 1

This is a description

l

Option 1

This is a description

xl

Option 1

This is a description

Colors

Available color variants.

midnight

Option 1

This is a description

basil

Option 1

This is a description

red

Option 1

This is a description

amber

Option 1

This is a description

States

Dedicated examples for disabled, error, required, optional, and horizontal states.

Disabled

Disabled group *

Option 1

This is a description

Option 2

This is a description

Option 3

This is a description

Error

Error group *

Option 1

This is a description

Option 2

This is a description

Option 3

This is a description

Optional unselect

Click selected option again to clear

Option 1

This is a description

Horizontal

Horizontal group *

Option 1

This is a description

Option 2

This is a description

Option 3

This is a description

Slots

Example with custom label slot and meta slot for trailing price.

Distributor options

From Distributor

Ships in 2–3 weeks

Transition Sentinel Alloy Deore XS White

$4,299.00

Transition Sentinel Alloy Deore XS Grey

$4,399.00

Transition Sentinel Alloy Deore XS Purple

$4,499.00

Transition Sentinel Alloy Deore Small White

$4,799.00

Transition Sentinel Alloy Deore Small Grey

$4,799.00

Selected value

empty

Props, Events & Slots

These tables match the current RadioGroup and RadioGroupItem APIs.

RadioGroup props

Props accepted by the group wrapper component.

Prop	Type	Default	Required	Description
modelValue	RadioValue	''	Required	Current selected radio value. Used with v-model binding.
items	RadioGroupItemOption[]	undefined	Optional	Array of radio options rendered by default slot implementation.
label	string	''	Optional	Group legend text displayed above radio items.
required	boolean	false	Optional	Shows required marker and prevents unselecting the current value.
disabled	boolean	false	Optional	Disables the whole radio group.
error	boolean	false	Optional	Applies error styles to group label and items.
size	'xs' \| 's' \| 'm' \| 'l' \| 'xl'	'm'	Optional	Controls radio circle, dot, label, description, and spacing size.
color	'midnight' \| 'basil' \| 'red' \| 'amber'	'midnight'	Optional	Controls radio active, hover, and focus color.
orientation	'vertical' \| 'horizontal'	'vertical'	Optional	Controls items layout direction.
name	string	auto-generated	Optional	Native radio input name. If omitted, component generates a unique group name.

RadioGroupItem props

Props accepted by the item component when used manually.

Prop	Type	Default	Required	Description
value	RadioValue	undefined	Required	Radio item value emitted when selected.
label	string	''	Optional	Radio item label.
description	string	undefined	Optional	Helper text displayed below the radio item label.
required	boolean	false	Optional	Shows required marker next to the radio item label.
checked	boolean	false	Optional	Controls checked state for custom item usage.
disabled	boolean	false	Optional	Disables the radio item.
error	boolean	false	Optional	Applies error styles to label and description.
size	'xs' \| 's' \| 'm' \| 'l' \| 'xl'	'm'	Optional	Controls item visual size.
color	'midnight' \| 'basil' \| 'red' \| 'amber'	'midnight'	Optional	Controls item active, hover, and focus color.
id	string	undefined	Optional	Native input id attribute.
name	string	undefined	Optional	Native input name attribute.

Item option shape

Field	Type	Required
label	string	Required
value	RadioValue	Required
description	string	Optional
id	string	Optional
disabled	boolean	Optional
required	boolean	Optional

Events

Event	Payload	Description
update:modelValue	RadioValue	Emitted when selected value changes.
change	RadioValue	Emitted together with update:modelValue after user selection changes.

Slots

Slot	Props	Description
label	{ label, required, error }	Overrides group legend content.
item	{ option, checked, select }	Overrides rendering of each item from items array.
meta	{ item, checked }	Adds trailing meta content inside each default RadioGroupItem.
default	{ modelValue, size, color, disabled, error, name, required, select }	Full custom rendering slot for advanced use cases.