Card checkbox group with icons

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

<template>
  <Card class="w-full max-w-xs p-0">
    <FieldGroup class="gap-0">
      <Field>
        <FieldLabel class="px-4 py-3">
          <Checkbox :default-value="true" />
          <FieldTitle>Push notifications</FieldTitle>
        </FieldLabel>
      </Field>
      <Separator />
      <Field>
        <FieldLabel class="px-4 py-3">
          <Checkbox />
          <FieldTitle>Email notifications</FieldTitle>
        </FieldLabel>
      </Field>
      <Separator />
      <Field>
        <FieldLabel class="px-4 py-3">
          <Checkbox />
          <FieldTitle>SMS notifications</FieldTitle>
        </FieldLabel>
      </Field>
    </FieldGroup>
  </Card>
</template>