ICheckbox ​

<ICheckbox v-model="agreed" label="I agree to the terms" />

<ICheckbox
  v-model="backup"
  label="Keep a copy"
  description="Store a PDF of every invoice you send, for seven years."
/>

<script setup lang="ts">
const all = computed({
  get: () => {
    if (selected.value.length === 0)
      return false
    if (selected.value.length === rows.length)
      return true
    return 'indeterminate'
  },
  set: value => selected.value = value ? rows.map(r => r.id) : [],
})
</script>

<template>
  <ICheckbox v-model="all" label="Select all invoices" />
</template>

<ICheckbox v-model="checked" size="sm" label="Small" />
<ICheckbox v-model="checked" size="md" label="Medium" />
<ICheckbox v-model="checked" size="lg" label="Large" />

<ICheckbox :model-value="true" disabled label="Required by your plan" />
<ICheckbox :model-value="false" disabled label="Not available yet" />

<ICheckbox v-model="agreed">
  <template #label>
    I agree to the <a href="/terms">terms of service</a>
  </template>
</ICheckbox>