<script setup lang="ts">
import { computed, useId } from 'vue'
import Checkbox from 'primevue/checkbox'
const props = defineProps<{ modelValue: boolean; label: string; inputId?: string; disabled?: boolean }>()
const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
const generatedId = useId()
const resolvedId = computed(() => props.inputId ?? `ks-check-${generatedId}`)
</script>
<template><label class="ks-check" :for="resolvedId"><Checkbox class="ks-checkbox" :input-id="resolvedId" :model-value="modelValue" binary :disabled="disabled" @update:model-value="emit('update:modelValue', Boolean($event))" /><span>{{ label }}</span></label></template>
<style scoped>.ks-check { display: inline-flex; align-items: center; gap: var(--ks-space-2); cursor: pointer; }</style>
