Custom positioned checkbox

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

<template>
  <FieldGroup class="w-full max-w-xs flex-row gap-4">
    <FieldLabel class="relative p-0">
      <Field orientation="horizontal">
        <Checkbox
          :default-value="true"
          class="absolute -top-2 -right-2 size-5 rounded-full border-none shadow-none"
        />
        <FieldTitle class="justify-center">Billings</FieldTitle>
      </Field>
    </FieldLabel>
    <FieldLabel class="relative p-0">
      <Field orientation="horizontal" class="justify-center">
        <Checkbox class="absolute -top-2 -right-2 size-5 rounded-full border-none shadow-none" />
        <FieldTitle class="justify-center">Payments</FieldTitle>
      </Field>
    </FieldLabel>
    <FieldLabel class="relative p-0">
      <Field orientation="horizontal" class="justify-center">
        <Checkbox class="absolute -top-2 -right-2 size-5 rounded-full border-none shadow-none" />
        <FieldTitle class="justify-center">Invoices</FieldTitle>
      </Field>
    </FieldLabel>
  </FieldGroup>
</template>