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

ParametersDescriptionTypeDefault value
nameIdentifier, usually a unique string or numberany-
shapeShape, optional values are square dotstringround
disabledWhether it is disabledbooleanfalse
label-disabledWhether to disable text content clicksbooleanfalse
label-positionText position, optional value is leftstringright
icon-sizeIcon size, default unit is pxnumber | string20px
checked-colorChecked status colorstring#1989fa

RadioGroup Props

ParametersDescriptionTypeDefault value
v-modelThe identifier of the currently selected itemany-
disabledWhether to disable all radio buttonsbooleanfalse
directionArrangement direction, optional value is horizontalstringvertical
icon-sizeThe icon size of all radio buttons, the default unit is pxnumber | string20px
checked-colorThe checked state color of all radio buttonsstring#1989fa
shapeShape, optional values are square dotstringround

Radio Events

Event nameDescriptionCallback parameters
clickTriggered when the radio button is clickedevent

RadioGroup Events

Event nameDescriptionCallback parameters
changeEvent triggered when the binding value changesname: string

Radio Slots

NameDescriptionParameters
defaultcustom text{ checked: boolean, disabled: boolean }
iconcustom 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.

NameDefaultDescription
--z-radio-size40rpx-
--z-radio-dot-size16rpxDistance from dot to border
--z-radio-border-colorvar(--z-gray-5)-
--z-radio-durationvar(--z-duration-fast)-
--z-radio-label-marginvar(--z-padding-xs)-
--z-radio-label-colorvar(--z-text-color)-
--z-radio-checked-icon-colorvar(--z-primary-color)-
--z-radio-disabled-icon-colorvar(--z-gray-5)-
--z-radio-disabled-label-colorvar(--z-text-color-3)-
--z-radio-disabled-backgroundvar(--z-border-color)-