Radio

Introduction

The radio component is used for users to select one option from multiple choices. There are two tags for implementing radio buttons: <MYRadio /> or <MYRadio></MYRadio><MYRadio-group> or <MYRadio-group></MYRadio-group> for radio button groups

Basic Usage

Single Radio Button

Use modelValue to bind the value of the radio button.

Code Demo

Option 1Option 2

<template>
  <MYRadio v-model='singleSelected' value='option1'>Option 1</MYRadio>
  <MYRadio v-model='singleSelected' value='option2'>Option 2</MYRadio>
</template>

展开代码

Radio Button Group

Use radioGroup to group radio buttons together.

Code Demo

Option 1Option 2Option 3

<template>
  <MYRadio-group v-model='groupSelected'>
    <MYRadio value='1'>Option 1</MYRadio>
    <MYRadio value='2'>Option 2</MYRadio>
    <MYRadio value='3'>Option 3</MYRadio>
  </MYRadio-group>
</template>

展开代码

Disabled State

Individual Disabled

Disable specific radio buttons.

Code Demo

Normal OptionDisabled OptionNormal Option

<template>
  <MYRadio-group v-model='disabledSelected'>
    <MYRadio value='1'>Normal Option</MYRadio>
    <MYRadio value='2' disabled>Disabled Option</MYRadio>
    <MYRadio value='3'>Normal Option</MYRadio>
  </MYRadio-group>
</template>

展开代码

Group Disabled

Disable the entire radio button group.

Code Demo

Disabled Option 1Disabled Option 2

<template>
  <MYRadio-group v-model='groupDisabledSelected' disabled>
    <MYRadio value='1'>Disabled Option 1</MYRadio>
    <MYRadio value='2'>Disabled Option 2</MYRadio>
  </MYRadio-group>
</template>

展开代码

Layout Direction

Vertical Layout

Use direction="vertical" to achieve vertical layout.

Code Demo

Vertical Option 1Vertical Option 2Vertical Option 3

<template>
  <MYRadio-group v-model='verticalSelected' direction='vertical'>
    <MYRadio value='1'>Vertical Option 1</MYRadio>
    <MYRadio value='2'>Vertical Option 2</MYRadio>
    <MYRadio value='3'>Vertical Option 3</MYRadio>
  </MYRadio-group>
</template>

展开代码

Button Style

Radio Button Style

Use MYRadioButton to implement button-style radio buttons.

Code Demo

Button 1Button 2Button 3

<template>
  <MYRadio-group v-model='buttonSelected'>
    <MYRadioButton value='1'>Button 1</MYRadioButton>
    <MYRadioButton value='2'>Button 2</MYRadioButton>
    <MYRadioButton value='3'>Button 3</MYRadioButton>
  </MYRadio-group>
</template>

展开代码

Button Size

Button-style radio buttons also support size control.

Code Demo

Small ButtonDefault ButtonLarge Button

<template>
  <div style='display: flex; flex-direction: column; gap: 15px;'>
    <MYRadio-group v-model='buttonSizeSelected'>
      <MYRadioButton value='small' size='small'>Small Button</MYRadioButton>
      <MYRadioButton value='default' size='default'>Default Button</MYRadioButton>
      <MYRadioButton value='large' size='large'>Large Button</MYRadioButton>
    </MYRadio-group>
  </div>
</template>

展开代码

API Reference

MYRadioGroup Props

Parameter	Description	Type	Options	Default
modelValue	Bound value	string | number | boolean	—	''
direction	Layout direction	string	horizontal/vertical	horizontal
disabled	Whether disabled	boolean	—	false
textColor	Text color	string	Supports hex colors or color names	#fff

MYRadio Props

Parameter	Description	Type	Options	Default
modelValue	Bound value	string | number	—	''
value	Option value	string | number	—	''
name	Native name attribute	string	—	''
disabled	Whether disabled	boolean	—	false

MYRadioButton Props

Parameter	Description	Type	Options	Default
modelValue	Bound value	string | number	—	''
value	Option value	string | number	—	''
label	Display text	string	—	''
name	Native name attribute	string	—	''
size	Size	string	small/default/large	default
disabled	Whether disabled	boolean	—	false

Type Definitions

interface RadioGroupProps {
  modelValue?: string | number | boolean;
  disabled?: boolean;
  direction?: 'horizontal' | 'vertical';
  textColor?: string;
}

interface RadioProps {
  modelValue?: string | number;
  value?: string | number;
  name?: string;
  disabled?: boolean;
}

interface RadioButtonProps {
  modelValue?: string | number;
  value?: string | number;
  label?: string;
  name?: string;
  size?: 'small' | 'default' | 'large';
  disabled?: boolean;
}