Kunlun DesignEnglish
Radio
Single selection in a set of alternatives
Basic usage
Radio boxes should not have too many options, and if you have a lot of options you should use select boxes instead of radio boxes.
to use the Radio component, you only need to set the 'v-model' binding variable, checked means that the value of the variable is the corresponding Radio The value of the value attribute, 'value' can be String, Number or Boolean.
<>
<template>
<kl-radio-group v-model="value">
<kl-radio label="HuTao" value="胡桃"></kl-radio>
<kl-radio label="YeLan" value="夜兰"></kl-radio>
<kl-radio label="QiQi" value="七七"></kl-radio>
</kl-radio-group>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>
Radio is used alone
Radio can also be used alone, and the same data needs to be bound to all radios.
<>
<template>
<kl-radio label="HuTao" value="胡桃" v-model="value"></kl-radio>
<kl-radio label="YeLan" value="夜兰" v-model="value"></kl-radio>
<kl-radio label="QiQi" value="七七" v-model="value"></kl-radio>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>
Disabled state
The 'disabled' property can be used to control the disabled state of the radio box.
You only need to set the 'disabled' attribute for radio-group to control all option disabled states.
<>
<template>
<kl-radio-group v-model="value" disabled>
<kl-radio label="HuTao" value="胡桃"></kl-radio>
<kl-radio label="YeLan" value="夜兰"></kl-radio>
<kl-radio label="QiQi" value="七七"></kl-radio>
</kl-radio-group>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>
Disable option
Setting the 'disabled' attribute for radio disables the option.
<>
<template>
<kl-radio-group v-model="value">
<kl-radio label="HuTao" value="胡桃" disabled></kl-radio>
<kl-radio label="YeLan" value="夜兰"></kl-radio>
<kl-radio label="QiQi" value="七七"></kl-radio>
</kl-radio-group>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>
With a border
Set the border property to true to render as a radio box with a border.
<>
<template>
<kl-radio-group v-model="value" border>
<kl-radio label="HuTao" value="胡桃" disabled></kl-radio>
<kl-radio label="YeLan" value="夜兰"></kl-radio>
<kl-radio label="QiQi" value="七七"></kl-radio>
</kl-radio-group>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>
icon
Icons can be passed in within a slot
<>
<template>
<kl-radio-group v-model="value">
<kl-radio value="Basketball"><KlSportBasketball /></kl-radio>
<kl-radio value="Football"><KlSportFootball /></kl-radio>
<kl-radio value="Tennis"><KlSportTennis /></kl-radio>
</kl-radio-group>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>
API
Radio attribute
| Property name | Description | Type | Default value |
|---|---|---|---|
| v-model | Binding value | boolean | — |
| value | The value of the option | string / number / boolean / object | — |
| label | The label of the option, if not set, defaults to the same as value | string/number | — |
| disabled | Whether to disable the option | boolean | false |
| border | Whether to display a border | boolean | false |
Radio slot
| Slot name | Description |
|---|---|
| default | Default slot |
RadioGroup attribute
| Property name | Description | Type | Default value |
|---|---|---|---|
| v-model | Binding value | boolean | — |
| disabled | Whether to disable all options | boolean | false |
| border | Whether to display all option borders | boolean | false |
RadioGroup event
| Event Name | Description | Callback parameters |
|---|---|---|
| change | Triggers only when modelValue changes | — |