Checkbox group in a frame

<script setup lang="ts">
import { Frame, FrameHeader, FramePanel, FrameTitle } from "@/components/reui/frame"
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel, FieldTitle } from "@/components/ui/field"
import { Separator } from "@/components/ui/separator"
</script>

<template>
  <Frame class="w-full max-w-xs" spacing="sm">
    <FrameHeader>
      <FrameTitle>Notification Settings</FrameTitle>
    </FrameHeader>
    <FramePanel class="overflow-hidden p-0!">
      <FieldGroup class="gap-0">
        <Field>
          <FieldLabel class="p-3">
            <Checkbox :default-value="true" />
            <FieldTitle>Push notifications</FieldTitle>
          </FieldLabel>
        </Field>
        <Separator />
        <Field>
          <FieldLabel class="p-3">
            <Checkbox />
            <FieldTitle>Email notifications</FieldTitle>
          </FieldLabel>
        </Field>
        <Separator />
        <Field>
          <FieldLabel class="p-3">
            <Checkbox />
            <FieldTitle>SMS notifications</FieldTitle>
          </FieldLabel>
        </Field>
      </FieldGroup>
    </FramePanel>
  </Frame>
</template>