BoxCheckBox Component

A styled checkbox component that works like a select-box option. Useful for multi-select inputs with a boxed UI style.

Usage

<template>
  <div>
    <box-checkbox
      name="fruits"
      :data="'Apple'"
      v-model="selectedFruits"
    >
      Apple
    </box-checkbox>

    <box-checkbox
      name="fruits"
      :data="'Banana'"
      v-model="selectedFruits"
    >
      Banana
    </box-checkbox>

    <p>Selected: {{ selectedFruits }}</p>
  </div>
</template>


<script> 
export default { 
  data() {
    return {
      selectedFruits: []
    };
  }
};
</script>

Props

Prop	Type	Default	Description
data	String / Object / Number	—	The value to bind when this checkbox is checked
name	String	—	Input name attribute
value	Array	[]	The array that stores selected values (works with v-model)
disabled	Boolean	false	Disable the checkbox

Features

• Styled checkbox with custom slot for label content.
• Works seamlessly with v-model for multiple selections.
• Supports disabled state with visual feedback.
• Emits updated value array on change.