vue-input-components

Checkbox Component

A customizable checkbox component that supports binary and multiple options, with different presentation styles.

Props

Prop Type Default Description
modelValue boolean false v-model binding for checkbox state
disabled boolean false Whether the checkbox is disabled
autosave (info: any) => void undefined Function to call when checkbox state changes
onCheckboxClick (row: any, itemKey: string) => void undefined Function to call when checkbox is clicked
presentation 'default' \| 'minimal' 'default' Visual presentation style

Events

Event Parameters Description
update:modelValue (value: boolean) Emitted when checkbox state changes
click (row: any, itemKey: string) Emitted when checkbox is clicked

Usage Example

<template>
  <Checkbox
    v-model="isChecked"
    :disabled="isDisabled"
    :autosave="handleAutosave"
    @click="handleClick"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Checkbox from '@/components/Checkbox.vue'

const isChecked = ref(false)
const isDisabled = ref(false)

const handleAutosave = (info: any) => {
  console.log('Checkbox state changed:', info)
}

const handleClick = (row: any, itemKey: string) => {
  console.log('Checkbox clicked:', row, itemKey)
}
</script>

Features