Kunlun DesignEnglish
Checkbox radio box
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 Checkbox component, simply set the 'v-model' binding variable, which means that the value of the variable is the corresponding Checkbox The value of the value attribute, 'value' can be String, Number or Boolean.
value: []
<>
<template>
<kl-checkbox-group v-model="value">
<kl-checkbox label="HuTao" value="胡桃"></kl-checkbox>
<kl-checkbox label="YeLan" value="夜兰"></kl-checkbox>
<kl-checkbox label="QiQi" value="七七"></kl-checkbox>
</kl-checkbox-group>
<div>value: {{ value }}</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref([])
</script>
Checkbox is used alone
Checkbox can also be used separately, the binding data type is 'boolean'.
<>
<template>
<kl-checkbox v-model="value1"><KlLogoQq /></kl-checkbox>
<kl-checkbox v-model="value2">Hello</kl-checkbox>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value1 = ref(true)
const value2 = ref(false)
const value3 = ref(false)
</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 Checkbox-group to control all option disabled states.
<>
<template>
<kl-checkbox-group v-model="value" disabled>
<kl-checkbox label="HuTao" value="胡桃"></kl-checkbox>
<kl-checkbox label="YeLan" value="夜兰"></kl-checkbox>
<kl-checkbox label="QiQi" value="七七"></kl-checkbox>
</kl-checkbox-group>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref([])
</script>
Disable the option
Setting the 'disabled' property for the Checkbox disables the option.
<>
<template>
<kl-checkbox-group v-model="value">
<kl-checkbox label="HuTao" value="胡桃" disabled></kl-checkbox>
<kl-checkbox label="YeLan" value="夜兰"></kl-checkbox>
<kl-checkbox label="QiQi" value="七七"></kl-checkbox>
</kl-checkbox-group>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref([])
</script>
With border
Set the border property to true to render as a radio box with a border.
<>
<template>
<kl-checkbox-group v-model="value" border>
<kl-checkbox label="HuTao" value="胡桃" disabled></kl-checkbox>
<kl-checkbox label="YeLan" value="夜兰"></kl-checkbox>
<kl-checkbox label="QiQi" value="七七"></kl-checkbox>
</kl-checkbox-group>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref([])
</script>
Icon
Icons can be passed in within a slot
value: []
<>
<template>
<kl-checkbox-group v-model="value">
<kl-checkbox value="Basketball"><KlSportBasketball /></kl-checkbox>
<kl-checkbox value="Football"><KlSportFootball /></kl-checkbox>
<kl-checkbox value="Tennis"><KlSportTennis /></kl-checkbox>
</kl-checkbox-group>
<div>value: {{ value }}</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref([])
</script>
API
Checkbox 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 |
Checkbox slot
| Slot name | Description |
|---|---|
| default | Default slot |
CheckboxGroup 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 |
CheckboxGroup event
| Event Name | Description | Callback parameters |
|---|---|---|
| change | Triggers only when modelValue changes | — |