UICheckbox

UICheckbox

A checkbox component for multiple selections.

<template>
  <UICheckbox
    v-model:checked="checked"
    :indeterminate="indeterminate"
    @change="handleChange"
  >
    Checkbox Label
  </UICheckbox>
</template>

<script setup lang="ts">
const checked = ref(false)
const indeterminate = ref(false)

const handleChange = (checked: boolean) => {
  console.log('Checkbox changed:', checked)
}
</script>

Props

• checked (boolean): Checkbox checked state
• disabled (boolean): Disable checkbox
• indeterminate (boolean): Show indeterminate state
• value (string | number | boolean): Checkbox value
• name (string): Input name attribute
• size (‘small’ | ‘medium’ | ‘large’): Checkbox size
• label (string): Checkbox label text

Events

• update:checked: Emitted when checked state changes
• change: Emitted when checkbox is clicked
• focus: Emitted when checkbox is focused
• blur: Emitted when checkbox loses focus

Slots

• default: Checkbox label content