Radio

Radio component encapsulation, works better with z-form component.

Basic Usage

Pass in options to automatically generate options

<!-- eslint-disable no-console -->
<script lang="ts" setup>
import { ref } from 'vue'

const options = ref([
  { label: 'Option 1', value: 1 },
  { label: 'Option 2', value: 2 },
  { label: 'Option 3', value: 3 },
])

const radioVal = ref(1)

function handleRadioChange(val: number) {
  console.log('radio change:', val)
}
</script>

<template>
  <z-radio v-model="radioVal" :options="options" @change="handleRadioChange" />
</template>

Disabled

Set disabled to true for a certain item in option

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

const options = ref([
  { label: 'Option 1', value: 1 },
  { label: 'Option 2', value: 2, disabled: true },
  { label: 'Option 3', value: 3 },
])

const radioVal = ref(1)
</script>

<template>
  <z-radio v-model="radioVal" :options="options" />
</template>

Disable all, pass disabled as true to the component

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

const options = ref([
  { label: 'Option 1', value: 1 },
  { label: 'Option 2', value: 2 },
  { label: 'Option 3', value: 3 },
])

const radioVal = ref(1)
</script>

<template>
  <z-radio v-model="radioVal" :disabled="true" :options="options" />
</template>

Key-Value Configuration

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

const options = ref([
  { data: { title: 'Option 1' }, key: 1 },
  { data: { title: 'Option 2' }, key: 2 },
  { data: { title: 'Option 3' }, key: 3 },
])

const alias = {
  label: 'data.title',
  value: 'key',
}

const radioVal = ref(1)
</script>

<template>
  <z-radio v-model="radioVal" :alias="alias" :options="options" />
</template>

Cancel Selection

Configure isCancel to true to cancel selection

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

const options = ref([
  { label: 'Option 1', value: 1 },
  { label: 'Option 2', value: 2 },
  { label: 'Option 3', value: 3 },
])

const radioVal = ref(1)
</script>

<template>
  <z-radio v-model="radioVal" is-cancel :options="options" />
</template>

Button Style

Set type for a certain item in option or pass type directly to the component

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

const options = ref([
  { label: 'Option 1', value: 1 },
  { label: 'Option 2', value: 2 },
  { label: 'Option 3', value: 3, type: 'radio-button' },
])

const radioVal = ref(1)
</script>

<template>
  <div class="flex flex-col">
    <z-radio v-model="radioVal" type="radio-button" :options="options" />
    <z-radio v-model="radioVal" :options="options" class="mt-4" />
  </div>
</template>

With Border

The border attribute or field can be rendered as a radio with border.

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

const options = ref([
  { label: 'Option 1', value: 1, border: true },
  { label: 'Option 2', value: 2 },
  { label: 'Option 3', value: 3 },
])

const radioVal = ref(1)
</script>

<template>
  <div class="flex flex-col">
    <z-radio v-model="radioVal" :options="options" />
    <z-radio v-model="radioVal" :border="true" :options="options" class="mt-4" />
  </div>
</template>

z-radio Attributes

Attribute	Description	Type	Default
model-value / v-model	Binding value	string / number / boolean	—
options	Configurable options	array	—
type	Radio form	string	radio
alias	Key-value pair configuration	object	{ label: 'label', value: 'value', disabled: 'disabled' }
isCancel	Whether to cancel selection	boolean	false
border	Whether to show border	boolean	false
size	Size of radio button or border button	string	default
disabled	Whether to disable	boolean	false
text-color	Text color when radio button is active	string	#ffffff
fill	Fill color and border color when radio button is active	string	#409EFF
validate-event	Whether to trigger form validation when input	boolean	true
name	Native name attribute	string	—
id	Native id attribute	string	—

z-radio Events

Event Name	Description	Type
change	Event triggered when binding value changes	Function

Options Item Configurable Attributes

Attribute	Description	Type	Default
value	Binding value of radio	string / number / boolean	—
label	Text of radio	string	—
disabled	Whether to disable radio	boolean	false
border	Whether to show border	boolean	false
size	Size of radio	enum	—
name	Native name attribute	string	—
type	Radio form	string	el-radio