Card checkbox with group

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

<template>
  <FieldGroup class="max-w-xs">
    <FieldLabel>
      <Field orientation="horizontal">
        <Checkbox :default-value="true" />
        <FieldContent>
          <FieldTitle>Enable notifications</FieldTitle>
          <FieldDescription>
            You can enable or disable notifications at any time.
          </FieldDescription>
        </FieldContent>
      </Field>
    </FieldLabel>
  </FieldGroup>
</template>