Colored checkbox

<script setup lang="ts">
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldLabel } from "@/components/ui/field"
</script>

<template>
  <div class="flex flex-col gap-4">
    <Field orientation="horizontal" class="w-auto">
      <Checkbox
        id="color-1"
        :default-value="true"
        class="data-checked:border-blue-500 data-checked:bg-blue-500 dark:data-checked:border-blue-500 dark:data-checked:bg-blue-500"
      />
      <FieldLabel for="color-1">Blue checkbox</FieldLabel>
    </Field>
    <Field orientation="horizontal" class="w-auto">
      <Checkbox
        id="color-2"
        :default-value="true"
        class="data-checked:border-green-500 data-checked:bg-green-500 dark:data-checked:border-green-500 dark:data-checked:bg-green-500"
      />
      <FieldLabel for="color-2">Green checkbox</FieldLabel>
    </Field>
    <Field orientation="horizontal" class="w-auto">
      <Checkbox
        id="color-3"
        :default-value="true"
        class="data-checked:border-yellow-500 data-checked:bg-yellow-500 dark:data-checked:border-yellow-500 dark:data-checked:bg-yellow-500"
      />
      <FieldLabel for="color-3">Yellow checkbox</FieldLabel>
    </Field>
  </div>
</template>