Radio

In the given set of options, single select. The difference between Checkbox and Checkbox is that radio boxes are generally used in scenarios where status changes and submission is required.

Basic usage

label is the copy of the radio box, name is the true value of the radio box, and v-model is the bound value.

vue

<template>
  <div class="box">
    <div class="box-item">
      <dk-radio
        v-model="checked"
        size="large"
        label="option1(large)"
        name="option1(large)"
      ></dk-radio>
      <dk-radio size="medium" label="option2(medium)" name="option2(medium)"></dk-radio>
      <dk-radio size="small" label="option3(small)" name="option3(small)"></dk-radio>
      <dk-radio size="mini" label="option4(mini)" name="option4(mini)"></dk-radio>
    </div>
    <div class="box-item">
      <dk-radio disabled label="option1" name="option1"></dk-radio>
      <dk-radio disabled label="option2" name="option2"></dk-radio>
      <dk-radio disabled label="option3" name="option3"></dk-radio>
      <dk-radio disabled label="option4" name="option4"></dk-radio>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { reactive, toRefs } from 'vue'
  const data = reactive({
    checked: 'option1(large)'
  })
  const { checked } = toRefs(data)
</script>

展开

RadioBoxGroup

Using dk-radio-group can achieve radio box groups.

option 1

option 2

option 3

vue

<template>
  <dk-radio-group v-model="groupValue" @change="handleGroupChange">
    <dk-radio label="option 1" name="radio1" />
    <dk-radio label="option 2" name="radio2" />
    <dk-radio label="option 3" name="radio3" />
  </dk-radio-group>
</template>
<script setup lang="ts">
  import { reactive, toRefs } from 'vue'
  const data = reactive({
    groupValue: 'option 1'
  })
  const { groupValue } = toRefs(data)
  const handleGroupChange = (val: string) => {
    console.log(val)
  }
</script>

展开

disabled

Disable the radio box through the disabled attribute.

option 1

option 2

option 3

vue

<template>
  <dk-radio-group v-model="groupValue">
    <dk-radio label="option 1" name="radio1" />
    <dk-radio label="option 2" name="radio2" />
    <dk-radio label="option 3" name="radio3" disabled />
  </dk-radio-group>
</template>
<script setup lang="ts">
  import { reactive, toRefs } from 'vue'
  const data = reactive({
    groupValue: 'option 1'
  })
  const { groupValue } = toRefs(data)
</script>

展开

border

Set a radio box with a border through the border attribute.

option 1

option 2

option 3

vue

<template>
  <dk-radio-group v-model="groupValue">
    <dk-radio label="option 1" name="radio1" border />
    <dk-radio label="option 2" name="radio2" border />
    <dk-radio label="option 3" name="radio3" border />
  </dk-radio-group>
</template>
<script setup lang="ts">
  import { reactive, toRefs } from 'vue'
  const data = reactive({
    groupValue: 'option 1'
  })
  const { groupValue } = toRefs(data)
</script>

展开

size

Through the size property to set the size of the radio box, support large, medium, small, mini, default small.

option 1

option 2

option 3

option 4

option 1

option 2

option 3

option 4

vue

<template>
  <dk-radio-group v-model="groupValue">
    <dk-radio label="option 1" name="radio1" size="large" />
    <dk-radio label="option 2" name="radio2" size="medium" />
    <dk-radio label="option 3" name="radio3" size="small" />
    <dk-radio label="option 4" name="radio4" size="mini" />
  </dk-radio-group>
  <dk-radio-group v-model="sizeGroupValue">
    <dk-radio label="option 1" name="radio1" border size="large" />
    <dk-radio label="option 2" name="radio2" border size="medium" />
    <dk-radio label="option 3" name="radio3" border size="small" />
    <dk-radio label="option 4" name="radio4" border size="mini" />
  </dk-radio-group>
</template>
<script setup lang="ts">
  import { reactive, toRefs } from 'vue'
  const data = reactive({
    groupValue: 'option 1'
  })
  const { groupValue } = toRefs(data)
</script>

展开

attribute

parameter	explain	type	Optional values	Default value
`v-model`	Binding value	`string`	-	-
`label`	Radio Box Copy	`string`	-	-
`name`	The true value of the radio box(Do not set default to`label`)	`string`	-	-
`size`	The size of the radio box	`string`	`large` `medium` `small` `mini`	`small`
`disabled`	Is it disabled	`boolean`	`true` `false`	`false`
`border`	Is there a border	`boolean`	`true` `false`	`false`
`checked-color`	Color when selected	`string`	-	`#409eff`
`unchecked-color`	Color when not selected	`string`	-	`#c0ccda`

Events

Event Name	explain	Callback Arguments
`change`	Binding value	`(value: string) => value`

RadioGroup attribute

parameter	explain	type	Optional values	Default value
`v-model`	Binding value	`string`	-	-

RadioGroup Events

Event Name	explain	Callback Arguments
`change`	Binding value	`(value: string) => value`

Radio ​

Contributors ​

Radio

Contributors