Switch group

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

<template>
  <Field class="w-auto">
    <FieldLabel>Notification Settings</FieldLabel>
    <Field orientation="horizontal">
      <Switch id="sg-email" :default-value="true" />
      <FieldLabel for="sg-email">Email notifications</FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <Switch id="sg-sms" />
      <FieldLabel for="sg-sms">SMS notifications</FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <Switch id="sg-push" :default-value="true" />
      <FieldLabel for="sg-push">Push notifications</FieldLabel>
    </Field>
  </Field>
</template>