KvcRadio

ラジオボタングループコンポーネントです。複数の選択肢から1つの項目を選択できます。

ライブデモ

基本的な使い方

<template>
  <kvc-radio
    v-model="selectedValue"
    :items="items"
  />
</template>

<script setup>
import { ref } from 'vue'

const items = ref([
  { label: '選択肢1', value: 'option1' },
  { label: '選択肢2', value: 'option2' },
  { label: '選択肢3', value: 'option3' }
])

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

プロパティ

プロパティ	型	デフォルト	説明
modelValue	`string`	`''`	選択された値（v-model）
items	`Array<{label: string, value: string}>`	`[]`	ラジオボタンの項目
readOnly	`boolean`	`false`	読み取り専用モード
disabled	`boolean`	`false`	無効化状態

イベント

イベント名	ペイロード	説明
update:modelValue	`string`	選択値が変更されたときに発火

使用例

基本的な使用

<template>
  <kvc-field label="優先度">
    <kvc-radio
      v-model="priority"
      :items="priorityItems"
    />
  </kvc-field>
  <p>選択された優先度: {{ priority }}</p>
</template>

<script setup>
import { ref } from 'vue'

const priorityItems = ref([
  { label: '高', value: 'high' },
  { label: '中', value: 'medium' },
  { label: '低', value: 'low' }
])

const priority = ref('medium')
</script>

読み取り専用

<template>
  <kvc-field label="ステータス">
    <kvc-radio
      v-model="status"
      :items="statusItems"
      :read-only="true"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

const statusItems = ref([
  { label: '承認済み', value: 'approved' },
  { label: '保留中', value: 'pending' },
  { label: '却下', value: 'rejected' }
])

const status = ref('approved')
</script>

無効化

<template>
  <kvc-field label="オプション">
    <kvc-radio
      v-model="option"
      :items="options"
      :disabled="true"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

const options = ref([
  { label: 'オプション A', value: 'a' },
  { label: 'オプション B', value: 'b' }
])

const option = ref('a')
</script>

TypeScript サポート

import type { KvcRadioProps, RadioItem } from '@zygapp/kintone-vue3-component'

const items: RadioItem[] = [
  { label: 'はい', value: 'yes' },
  { label: 'いいえ', value: 'no' }
]

const props: KvcRadioProps = {
  modelValue: 'yes',
  items: items,
  readOnly: false,
  disabled: false
}