Radio

Radio.

When To Use

  • Used to select a single state from multiple options.
  • The difference from Select is that Radio is visible to the user and can facilitate the comparison of choice, which means there shouldn’t be too many of them.

Examples

The simplest use. 

<template>
  <a-radio>Radio</a-radio>
</template>

Solid radio button style. 

<template>
  <div>
    <div>
      <a-radio-group default-value="a" button-style="solid">
        <a-radio-button value="a">
          Hangzhou
        </a-radio-button>
        <a-radio-button value="b">
          Shanghai
        </a-radio-button>
        <a-radio-button value="c">
          Beijing
        </a-radio-button>
        <a-radio-button value="d">
          Chengdu
        </a-radio-button>
      </a-radio-group>
    </div>
    <div :style="{ marginTop: '16px' }">
      <a-radio-group default-value="c" button-style="solid">
        <a-radio-button value="a">
          Hangzhou
        </a-radio-button>
        <a-radio-button value="b" disabled>
          Shanghai
        </a-radio-button>
        <a-radio-button value="c">
          Beijing
        </a-radio-button>
        <a-radio-button value="d">
          Chengdu
        </a-radio-button>
      </a-radio-group>
    </div>
  </div>
</template>

Looking for more Ant Design Vue Radio? Please check the official docs.