■ 概要（overview）

コンポーネント名

CheckBoxField

レベル (Atomic Design)

Atoms（原子）

カテゴリー（category）

fields

■ データ（data）

【reactive/ref】

itemChecked (boolean) - チェックボックスの状態を保持
checkedItem (string) - チェックされたアイテムの値

【props】

item (string) - チェックボックスの値
id (string) - チェックボックスのID
class (string) - チェックボックスのクラス
name (string) - チェックボックスの名前
style (string) - チェックボックスのスタイル
styleReset (boolean) - スタイルリセットフラグ
label (string) - チェックボックスのラベル
type (string) - チェックボックスのタイプ
isChecked (boolean) - チェックボックスの初期チェック状態
isDisabled (boolean) - チェックボックスの無効状態
isReadonly (boolean) - チェックボックスの読み取り専用状態

【emit】

update:modelvalue - 子で変更されたチェック状態に応じて値を親に渡す
update:checked - 子で変更されたチェック状態（真偽値）を親に渡す

【computed】

bindingClass - styleResetがtrueの場合はprops.class、falseの場合はrevuekitz-check-box ${props.class}をクラス名としてセットする

■ 使用例（usecase）

<script setup>
import { ref } from 'vue'
import { CheckBoxField } from 'revuekitz'
import 'revuekitz/dist/style.css' 

const checkedItem = ref('')
const checkBoxChecked = ref(false)

</script>

<template>
   <CheckBoxField
      id="checkBoxFieldId"
      class="check-box-field-class"
      style="color: red"
      :styleReset="false"
      name="check_box_field_name"
      label="check-box-field Label"
      type="checkbox"
      :isDisabled="false"
      :isReadonly="false"
      item="check-box-field-item"
      v-model="checkedItem"
    />
</template>