Inline horizontal checkbox group

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

<template>
  <div class="flex flex-wrap items-center gap-6">
    <Field orientation="horizontal" class="w-auto">
      <Checkbox id="inline-1" :default-value="true" />
      <FieldLabel for="inline-1" class="cursor-pointer">Read</FieldLabel>
    </Field>
    <Field orientation="horizontal" class="w-auto">
      <Checkbox id="inline-2" />
      <FieldLabel for="inline-2" class="cursor-pointer">Write</FieldLabel>
    </Field>
    <Field orientation="horizontal" class="w-auto">
      <Checkbox id="inline-4" :default-value="true" />
      <FieldLabel for="inline-4" class="cursor-pointer">Delete</FieldLabel>
    </Field>
  </div>
</template>