Checkbox group

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

<template>
  <Field class="w-auto">
    <FieldLabel>Notification Settings</FieldLabel>
    <Field orientation="horizontal">
      <Checkbox id="group-1" :default-value="true" />
      <FieldLabel for="group-1">Email notifications</FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <Checkbox id="group-2" />
      <FieldLabel for="group-2">SMS notifications</FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <Checkbox id="group-3" :default-value="true" />
      <FieldLabel for="group-3">Push notifications</FieldLabel>
    </Field>
  </Field>
</template>