KRadioGroup

示例

Vertical

Option AOption BOption C

Selected: a

Horizontal

Option AOption BOption C

Radio button group with v-model binding, options array, and horizontal/vertical direction.

Props

Name	Type	Default	Description
modelValue	string	—	Bound value via v-model (matches the selected option's value).
options	Array<{ value: string; label: string; disabled?: boolean }>	—	(required) Array of radio options.
direction	'horizontal' | 'vertical'	'vertical'	Layout direction of the radio options.
disabled	boolean	false	Whether the entire group is disabled. Individual options may also be disabled.
theme	'auto' | 'day' | 'night'	'auto'	Theme mode. auto follows the current theme; day and night force a specific mode.

Emits

Name	Parameters	Description
update:modelValue	(value: string)	Emitted when a radio option is selected.

Basic Usage

<script setup>
import { ref } from 'vue'
import { KRadioGroup } from '@kK-2004/ui-component'

const selected = ref('option1')
</script>

<template>
  <KRadioGroup
    v-model="selected"
    :options="[
      { value: 'option1', label: 'Option 1' },
      { value: 'option2', label: 'Option 2' },
      { value: 'option3', label: 'Option 3', disabled: true },
    ]"
    direction="vertical"
  />
</template>