Field with radio groups and checkboxes

<script setup lang="ts">
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSet, FieldTitle } from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
</script>

<template>
  <div class="mx-auto w-full max-w-xs">
    <FieldGroup>
      <FieldSet>
        <FieldLegend variant="label">Email Notifications</FieldLegend>
        <FieldGroup class="gap-4">
          <Field orientation="horizontal">
            <Checkbox id="notify-updates" :default-value="true" />
            <FieldContent>
              <FieldTitle>Product updates</FieldTitle>
              <FieldDescription>
                Receive emails about new features and improvements.
              </FieldDescription>
            </FieldContent>
          </Field>
          <Field orientation="horizontal">
            <Checkbox id="notify-security" :default-value="true" disabled />
            <FieldContent>
              <FieldTitle>Security alerts</FieldTitle>
              <FieldDescription>
                Critical security notifications cannot be disabled.
              </FieldDescription>
            </FieldContent>
          </Field>
        </FieldGroup>
      </FieldSet>
      <FieldSet>
        <FieldLegend variant="label">Profile Privacy</FieldLegend>
        <RadioGroup default-value="public">
          <FieldGroup class="gap-2">
            <Field orientation="horizontal">
              <RadioGroupItem value="public" id="privacy-public" />
              <FieldLabel for="privacy-public" class="font-normal">
                Public - visible to everyone
              </FieldLabel>
            </Field>
            <Field orientation="horizontal">
              <RadioGroupItem value="private" id="privacy-private" />
              <FieldLabel for="privacy-private" class="font-normal">
                Private - only visible to you
              </FieldLabel>
            </Field>
          </FieldGroup>
        </RadioGroup>
      </FieldSet>
    </FieldGroup>
  </div>
</template>