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>

Option 1Option 2Option 3