Radio

Select a single option among a group of choices.

Basic Usage

A radio group consists of multiple yh-radio components wrapped in a yh-radio-group. Bind v-model to enable single-choice functionality.

Option OneOption Two

Selected Value: 1

Basic Usage

Disabled State

Use the disabled property to control the disabled state of the radio.

Disable entire group:

Option OneOption Two

Disable individual:

Option OneOption Two (Disabled)Option Three

Disabled State

Individual usage

Radio can also be used alone without being wrapped by RadioGroup.

Option OneOption TwoOption Three

Selected Value: 1

Individual usage

With Border

Use the border property to render the radio with a border.

Option OneOption TwoDisabled

With Border

Different Sizes

Use the size property to set the size of the radio.

LargeDefaultSmall

Different Sizes

Uniform Group Size

Set the size property on the yh-radio-group to uniformly control the size of all radios in the group.

Large:

Option OneOption Two

Default:

Option OneOption Two

Small:

Option OneOption Two

Uniform Group Size

Button Style

Use the yh-radio-button component to implement button-style radios.

New YorkWashingtonLos AngelesChicago

Button Style

Button Style Custom Color

Customize the fill and text colors of the checked button using the fill and text-color properties.

New YorkWashingtonLos AngelesChicago

New YorkWashingtonLos AngelesChicago

New YorkWashingtonLos AngelesChicago

Button Style Custom Color

Button Style Disabled

New YorkWashingtonLos AngelesChicago

Button Style Disabled

Button Style Different Sizes

Large:

New YorkWashingtonLos Angeles

Default:

New YorkWashingtonLos Angeles

Small:

New YorkWashingtonLos Angeles

Button Style Different Sizes

Use in Nuxt

The Radio component fully supports Nuxt 3/4 SSR rendering. When used in a Nuxt project, the component is automatically imported.

Option 1Option 2

New YorkWashington

Use in Nuxt

SSR Notes:

• ✅ Basic radio, button style, and radio group are fully supported.
• ✅ Styles and checked states render accurately in the SSR environment.
• ✅ Custom colors (fill, text-color) are supported.

SSR Safety

The Radio component has passed complete SSR testing to ensure that the server-side preselected state remains consistent with the client-side state after hydration.

API

Radio Props

Prop	Description	Type	Default
model-value / v-model	Binding value	string | number | boolean	—
value	Value of radio	string | number | boolean	—
label	Text content to display	string	—
disabled	Whether to disable	boolean	false
border	Whether to show border	boolean	false
size	Radio size	'large' | 'default' | 'small'	'default'
name	Native name attribute	string	—

Radio Events

Event Name	Description	Callback Parameters
change	Triggered when the binding value changes	(value: string | number | boolean) => void

Radio Slots

Slot Name	Description
default	Custom default content

RadioButton Props

Prop	Description	Type	Default
model-value / v-model	Binding value	string | number | boolean	—
value	Value of radio button	string | number | boolean	—
label	Text content to display	string	—
disabled	Whether to disable	boolean	false
size	Radio button size	'large' | 'default' | 'small'	'default'
name	Native name attribute	string	—

RadioButton Events

Event Name	Description	Callback Parameters
change	Triggered when the binding value changes	(value: string | number | boolean) => void

RadioButton Slots

Slot Name	Description
default	Custom default content

RadioGroup Props

Prop	Description	Type	Default
model-value / v-model	Binding value	string | number | boolean	—
size	Radio group size	'large' | 'default' | 'small'	—
disabled	Whether to disable	boolean	false
name	Native name attribute	string	—
text-color	Text color when button is active	string	#fff
fill	Fill color and border color when button is active	string	var(--yh-color-primary)

RadioGroup Events

Event Name	Description	Callback Parameters
change	Triggered when the binding value changes	(value: string | number | boolean) => void

RadioGroup Slots

Slot Name	Description
default	Custom default content

Theme Variables

Radio Theme Variables

Variable	Description	Default
--yh-radio-font-size	Font size	var(--yh-font-size-base)
--yh-radio-text-color	Text color	var(--yh-text-color-regular)
--yh-radio-input-size	Radio size	14px
--yh-radio-checked-dot-color	Checked dot color	var(--yh-color-primary)
--yh-radio-disabled-bg-color	Disabled background color	var(--yh-fill-color-light)

RadioButton Theme Variables

Variable	Description	Default
--yh-radio-button-font-size	Font size	var(--yh-font-size-base)
--yh-radio-button-text-color	Text color	var(--yh-text-color-regular)
--yh-radio-button-checked-bg-color	Checked background color	var(--yh-color-primary)
--yh-radio-button-checked-text-color	Checked text color	var(--yh-fill-color-blank)
--yh-radio-button-disabled-bg-color	Disabled background color	var(--yh-fill-color-light)