Radio radio button

introduce

Make a single selection from a set of alternatives.

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>

Radio Props

RadioGroup Props

Radio Events

RadioGroup Events

Radio Slots

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.