Radio

In a set of related and mutually exclusive data, the user can only select one option.

Basic usage

Bind a variable to Radio s v-model. It equals to the value of label of the chosen radio. The type of label is String, Number or Boolean.

Option 1Option 2

Disabled

Disabled attribute is used to disable the radio. You just need to add the disabled attribute.

Option 1Option 2

Radio group

Suitable for choosing from some mutually exclusive options. Combine tu-radio-group with tu-radio to display a radio group. Bind a variable with v-model of tu-radio-group element and set label value in tu-radio. It also provides change event with the current value as its parameter.

Option 1Option 2Option 3

Radio group styles

Checkbox with button / border style.

Button Style

Option 1Option 2Option 3

Border Style

Option 1Option 2Option 3

Sizes

Besides default size, tu-radio-group component provides three additional sizes for you to choose among different scenarios. Use attribute size to set additional sizes with mini, small, large.

<template>
  <tu-row>
    <tu-col :span="8">
      <p>mini</p>
      <tu-radio-group v-model="radio1" size="mini">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
      <p>small</p>
      <tu-radio-group v-model="radio1" size="small">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
      <p>medium</p>
      <tu-radio-group v-model="radio1">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
      <p>large</p>
      <tu-radio-group v-model="radio1" size="large">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
    </tu-col>
    <tu-col :span="8">
      <p>mini</p>
      <tu-radio-group v-model="radio2" size="mini" type="button">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
      <p>small</p>
      <tu-radio-group v-model="radio2" size="small" type="button">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
      <p>medium</p>
      <tu-radio-group v-model="radio2" type="button">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
      <p>large</p>
      <tu-radio-group v-model="radio2" size="large" type="button">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
    </tu-col>
    <tu-col :span="8">
      <p>mini</p>
      <tu-radio-group v-model="radio3" size="mini" type="border">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
      <p>small</p>
      <tu-radio-group v-model="radio3" size="small" type="border">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
      <p>medium</p>
      <tu-radio-group v-model="radio3" type="border">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
      <p>large</p>
      <tu-radio-group v-model="radio3" size="large" type="border">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const radio1 = ref(1);
const radio2 = ref(1);
const radio3 = ref(1);
</script>

<template>
  <tu-row>
    <tu-col :span="8">
      <p>mini</p>
      <tu-radio-group v-model="radio1" size="mini">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
      <p>small</p>
      <tu-radio-group v-model="radio1" size="small">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
      <p>medium</p>
      <tu-radio-group v-model="radio1">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
      <p>large</p>
      <tu-radio-group v-model="radio1" size="large">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
    </tu-col>
    <tu-col :span="8">
      <p>mini</p>
      <tu-radio-group v-model="radio2" size="mini" type="button">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
      <p>small</p>
      <tu-radio-group v-model="radio2" size="small" type="button">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
      <p>medium</p>
      <tu-radio-group v-model="radio2" type="button">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
      <p>large</p>
      <tu-radio-group v-model="radio2" size="large" type="button">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
    </tu-col>
    <tu-col :span="8">
      <p>mini</p>
      <tu-radio-group v-model="radio3" size="mini" type="border">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
      <p>small</p>
      <tu-radio-group v-model="radio3" size="small" type="border">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
      <p>medium</p>
      <tu-radio-group v-model="radio3" type="border">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
      <p>large</p>
      <tu-radio-group v-model="radio3" size="large" type="border">
        <tu-radio :label="1">Option 1</tu-radio>
        <tu-radio :label="2">Option 2</tu-radio>
      </tu-radio-group>
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const radio1 = ref(1);
const radio2 = ref(1);
const radio3 = ref(1);
</script>

Radio API

Radio Attributes

Name	Description	Type	Default
v-model	Binding value	`String` `Number` `Boolean`	-
label	The value of Radio	`String` `Number` `Boolean`	-
disabled	Whether Radio is disabled	`Boolean`	false
type	Type of the Radio	`String`	-
size	Size of the Radio	`String`	medium
name	Native name attribute	`String`	-

Radio Events

Name	Description	Type
change	Triggers when the bound value changes	`Function`

Radio Slots

Name	Description
default	Customize default content

RadioGroup API

RadioGroup Attributes

Name	Description	Type	Default
v-model	Binding value	`String` `Number` `Boolean`	-
type	Type of the RadioGroup	`String`	-
size	Size of the RadioGroup	`String`	medium
disabled	Whether the nesting radios are disabled	`Boolean`	false
text-color	Font color when button is active	`String`	-
validate-event	Whether to trigger form validation	`Boolean`	true
label	Same as aria-label in RadioGroup	`String`	-
name	Native name attribute	`String`	-
id	Native id attribute	`String`	-

RadioGroup Events

Name	Description	Type
change	Triggers when the bound value changes	`Function`

RadioGroup Slots

Name	Description	Type
default	Customize default content	Radio

Radio ​

Basic usage ​

Disabled ​

Radio group ​

Radio group styles ​

Sizes ​

Radio API ​

Radio Attributes ​

Radio Events ​

Radio Slots ​

RadioGroup API ​

RadioGroup Attributes ​

RadioGroup Events ​

RadioGroup Slots ​

Radio

Basic usage

Disabled

Radio group

Radio group styles

Sizes

Radio API

Radio Attributes

Radio Events

Radio Slots

RadioGroup API

RadioGroup Attributes

RadioGroup Events

RadioGroup Slots