KvcCheckbox

チェックボックスグループコンポーネントです。複数の選択肢から複数の項目を選択できます。

ライブデモ

基本的な使い方

<template>
  <kvc-checkbox
    v-model="selectedItems"
    :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 selectedItems = 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-checkbox
      v-model="interests"
      :items="interestItems"
    />
  </kvc-field>
  <p>選択された項目: {{ interests.join(', ') }}</p>
</template>

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

const interestItems = ref([
  { label: 'プログラミング', value: 'programming' },
  { label: 'デザイン', value: 'design' },
  { label: 'マーケティング', value: 'marketing' },
  { label: 'データ分析', value: 'analytics' }
])

const interests = ref(['programming'])
</script>

横並び表示

<template>
  <kvc-field label="通知設定">
    <kvc-checkbox
      v-model="notifications"
      :items="notificationItems"
    />
  </kvc-field>
</template>

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

const notificationItems = ref([
  { label: 'メール', value: 'email' },
  { label: 'SMS', value: 'sms', disabled: true },
  { label: 'プッシュ通知', value: 'push' }
])

const notifications = ref(['email', 'push'])
</script>

読み取り専用

<template>
  <kvc-field label="選択済みオプション">
    <kvc-checkbox
      v-model="selectedOptions"
      :items="options"
      :read-only="true"
    />
  </kvc-field>
</template>

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

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

const selectedOptions = ref(['a', 'c'])
</script>

無効化

<template>
  <kvc-field label="無効なチェックボックス">
    <kvc-checkbox
      v-model="disabledValues"
      :items="disabledItems"
      :disabled="true"
    />
  </kvc-field>
</template>

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

const disabledItems = ref([
  { label: '項目1', value: '1' },
  { label: '項目2', value: '2' }
])

const disabledValues = ref([])
</script>

TypeScript サポート

import type { KvcCheckboxProps, CheckboxItem } from '@zygapp/kintone-vue3-component'

const items: CheckboxItem[] = [
  { label: 'オプション1', value: 'opt1' },
  { label: 'オプション2', value: 'opt2' }
]

const props: KvcCheckboxProps = {
  modelValue: ['opt1'],
  items: items,
  readOnly: false,
  disabled: false
}