Radio radio button
introduce
Make a single selection from a set of alternatives.
Code Demo
Basic usage
Bind the value to the name of the currently selected item through v-model
.
<z-radio-group v-model="checked">
<z-radio name="1">Radio button 1</z-radio>
<z-radio name="2" :custom-style="{ 'margin-top': '20rpx' }"
>Radio button 2</z-radio
>
</z-radio-group>
import { ref } from 'vue'
const checked = ref('1')
Horizontal arrangement
Setting the direction
property to horizontal
causes the radio button group to be arranged horizontally.
<z-radio-group v-model="checked" direction="horizontal">
<z-radio name="1">Radio button 1</z-radio>
<z-radio name="2">Radio button 2</z-radio>
</z-radio-group>
Disabled state
Disable option switching via the disabled
attribute, setting disabled
on Radio
disables individual options.
<z-radio-group v-model="checked" disabled>
<z-radio name="1">Radio button 1</z-radio>
<z-radio name="2">Radio button 2</z-radio>
</z-radio-group>
Custom shapes
The optional values of the shape
attribute are square
and dot
, and the radio button shapes correspond to square and dot shapes respectively.
<z-radio-group v-model="checked" shape="square">
<z-radio name="1">Radio button 1</z-radio>
<z-radio name="2">Radio button 2</z-radio>
</z-radio-group>
<z-radio-group v-model="checked" shape="dot">
<z-radio name="1">Radio 1</z-radio>
<z-radio name="2">Radio 2</z-radio>
</z-radio-group>
Custom color
Set the icon color of the checked state through the checked-color
property.
<z-radio-group v-model="checked">
<z-radio name="1" checked-color="#ee0a24">Radio button 1</z-radio>
<z-radio name="2" checked-color="#ee0a24">Radio button 2</z-radio>
</z-radio-group>
Custom size
The size of the icon can be customized through the icon-size
attribute.
<z-radio-group v-model="checked">
<z-radio name="1" icon-size="24px">Radio button 1</z-radio>
<z-radio name="2" icon-size="24px">Radio button 2</z-radio>
</z-radio-group>
Custom icon
Customize the icon through the icon
slot, and determine whether it is selected through slotProps
.
<z-radio-group v-model="checked">
<z-radio name="1">
Radio button 1
<template #icon="props">
<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
</template>
</z-radio>
<z-radio name="2">
radio button 2
<template #icon="props">
<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
</template>
</z-radio>
</z-radio-group>
<style>
.demo-radio {
.img-icon {
width: 40rpx;
height: 40rpx;
}
}
</style>
<script lang="ts" setup>
import { ref } from 'vue'
const checked = ref('1')
const activeIcon =
'https://cdn.zebraui.com/zebra-ui/images/assets/demo-select.png'
const inactiveIcon =
'https://cdn.zebraui.com/zebra-ui/images/assets/demo-noselect.png'
</script>
Left text
Set the label-position
property to 'left'
to adjust the text position to the left side of the radio button.
<z-radio-group v-model="checked">
<z-radio name="1" label-position="left">Radio button 1</z-radio>
<z-radio name="2" label-position="left">Radio button 2</z-radio>
</z-radio-group>
Disable text click
After setting the label-disabled
attribute, clicking on content other than the icon will not trigger the radio button switch.
<z-radio-group v-model="checked">
<z-radio name="1" label-disabled>Radio button 1</z-radio>
<z-radio name="2" label-disabled>Radio button 2</z-radio>
</z-radio-group>
Used with cell component
When used with the cell component, you need to introduce the Cell
and CellGroup
components.
<z-radio-group v-model="checked">
<z-cell-group>
<z-cell title="Radio button 1" clickable @click="checked = '1'">
<template #right-icon>
<z-radio name="1" />
</template>
</z-cell>
<z-cell title="Radio button 2" clickable @click="checked = '2'">
<template #right-icon>
<z-radio name="2" />
</template>
</z-cell>
</z-cell-group>
</z-radio-group>
API
Radio Props
Parameters | Description | Type | Default value |
---|---|---|---|
name | Identifier, usually a unique string or number | any | - |
shape | Shape, optional values are square dot | string | round |
disabled | Whether it is disabled | boolean | false |
label-disabled | Whether to disable text content clicks | boolean | false |
label-position | Text position, optional value is left | string | right |
icon-size | Icon size, default unit is px | number | string | 20px |
checked-color | Checked status color | string | #1989fa |
RadioGroup Props
Parameters | Description | Type | Default value |
---|---|---|---|
v-model | The identifier of the currently selected item | any | - |
disabled | Whether to disable all radio buttons | boolean | false |
direction | Arrangement direction, optional value is horizontal | string | vertical |
icon-size | The icon size of all radio buttons, the default unit is px | number | string | 20px |
checked-color | The checked state color of all radio buttons | string | #1989fa |
shape | Shape, optional values are square dot | string | round |
Radio Events
Event name | Description | Callback parameters |
---|---|---|
click | Triggered when the radio button is clicked | event |
RadioGroup Events
Event name | Description | Callback parameters |
---|---|---|
change | Event triggered when the binding value changes | name: string |
Radio Slots
Name | Description | Parameters |
---|---|---|
default | custom text | { checked: boolean, disabled: boolean } |
icon | custom icon | { checked: boolean, disabled: boolean } |
Theme customization
Style variables
The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.
Name | Default | Description |
---|---|---|
--z-radio-size | 40rpx | - |
--z-radio-dot-size | 16rpx | Distance from dot to border |
--z-radio-border-color | var(--z-gray-5) | - |
--z-radio-duration | var(--z-duration-fast) | - |
--z-radio-label-margin | var(--z-padding-xs) | - |
--z-radio-label-color | var(--z-text-color) | - |
--z-radio-checked-icon-color | var(--z-primary-color) | - |
--z-radio-disabled-icon-color | var(--z-gray-5) | - |
--z-radio-disabled-label-color | var(--z-text-color-3) | - |
--z-radio-disabled-background | var(--z-border-color) | - |