Circle checkbox

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

<template>
  <Field orientation="horizontal" class="relative w-auto">
    <Checkbox id="circle" class="rounded-full" :default-value="true" />
    <FieldLabel
      for="circle"
      class="peer-data-checked:text-muted-foreground relative transition-colors after:absolute after:inset-x-0 after:top-1/2 after:h-px after:-translate-y-1/2 after:scale-x-0 after:bg-current after:transition-transform peer-data-checked:after:scale-x-100"
    >
      Circle checkbox
    </FieldLabel>
  </Field>
</template>