Checkbox.vue

<script setup lang="ts">
const colors = ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral'] as const
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const

const checkedColors = ref(
  Object.fromEntries(colors.map(c => [c, true]))
) as Ref<Record<string, boolean>>

const checkedSizes = ref(
  Object.fromEntries(sizes.map(s => [s, true]))
) as Ref<Record<string, boolean>>

const listChecked = ref(false)
const cardChecked = ref(true)
const indeterminate = ref<boolean | 'indeterminate'>('indeterminate')
const highlighted = ref(true)
const disabled = ref(false)
const required = ref(false)

const jobOptions = ref([
  { id: 'traces', label: 'Emit traces', description: 'Stream span events to the collector.', checked: true },
  { id: 'metrics', label: 'Publish metrics', description: 'Report runtime telemetry every 30 s.', checked: true },
  { id: 'heartbeat', label: 'Send heartbeat', description: 'Renew lease on each agent tick.', checked: false },
  { id: 'debug', label: 'Verbose debug logs', description: 'Include internal runtime frames.', checked: false },
])
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Colors">
      <div class="flex flex-wrap gap-4">
        <UCheckbox
          v-for="c in colors"
          :key="c"
          v-model="checkedColors[c]"
          :color="c"
          :label="c"
          class="capitalize"
        />
      </div>
    </GallerySection>

    <GallerySection title="Sizes">
      <div class="flex flex-wrap items-center gap-4">
        <UCheckbox
          v-for="s in sizes"
          :key="s"
          v-model="checkedSizes[s]"
          :size="s"
          :label="s"
          class="capitalize"
        />
      </div>
    </GallerySection>

    <GallerySection title="Variants">
      <div class="flex flex-wrap gap-6">
        <UCheckbox
          v-model="listChecked"
          variant="list"
          label="List variant"
          description="Default inline style."
          color="primary"
        />
        <UCheckbox
          v-model="cardChecked"
          variant="card"
          label="Card variant"
          description="Bordered card when checked."
          color="primary"
        />
      </div>
    </GallerySection>

    <GallerySection title="States">
      <div class="flex flex-wrap gap-6">
        <UCheckbox
          v-model="indeterminate"
          label="Indeterminate"
          description="Partial job selection."
          color="warning"
          icon="i-material-symbols-indeterminate-check-box-outline"
        />
        <UCheckbox
          v-model="highlighted"
          :highlight="true"
          label="Highlighted"
          description="Focus ring always visible."
          color="info"
        />
        <UCheckbox
          :model-value="false"
          disabled
          label="Disabled"
          description="Agent is locked."
          color="neutral"
        />
        <UCheckbox
          :model-value="true"
          disabled
          label="Disabled (checked)"
          description="Session already committed."
          color="neutral"
        />
        <UCheckbox
          :model-value="false"
          required
          label="Required"
          description="Must accept runtime terms."
          color="error"
        />
      </div>
    </GallerySection>

    <GallerySection title="Indicator position">
      <div class="flex flex-wrap gap-6">
        <UCheckbox
          :model-value="true"
          indicator="start"
          label="Start"
          description="Checkbox leads the label."
          color="primary"
        />
        <UCheckbox
          :model-value="true"
          indicator="end"
          label="End"
          description="Checkbox trails the label."
          color="secondary"
        />
        <UCheckbox
          :model-value="true"
          indicator="hidden"
          label="Hidden (card-only)"
          description="Indicator hidden; use with card variant."
          variant="card"
          color="success"
        />
      </div>
    </GallerySection>

    <GallerySection title="Custom icon">
      <div class="flex flex-wrap gap-6">
        <UCheckbox
          :model-value="true"
          icon="i-material-symbols-check-circle-outline"
          label="Job completed"
          color="success"
        />
        <UCheckbox
          :model-value="true"
          icon="i-material-symbols-bolt"
          label="Fast-path enabled"
          color="warning"
        />
        <UCheckbox
          :model-value="true"
          icon="i-material-symbols-lock-outline"
          label="Lease locked"
          color="error"
        />
      </div>
    </GallerySection>

    <GallerySection title="Realistic — Job runtime options">
      <div class="flex w-full max-w-sm flex-col gap-3">
        <UCheckbox
          v-for="opt in jobOptions"
          :key="opt.id"
          v-model="opt.checked"
          variant="card"
          color="primary"
          :label="opt.label"
          :description="opt.description"
          icon="i-material-symbols-settings-outline"
        />
      </div>
    </GallerySection>
  </div>
</template>