Settings form with validation

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldSeparator, FieldTitle } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Switch } from "@/components/ui/switch"
import { Textarea } from "@/components/ui/textarea"
</script>

<template>
  <div class="mx-auto w-full max-w-xs">
    <FieldGroup>
      <Field>
        <FieldLabel for="settings-name">
          Display Name <span class="text-destructive">*</span>
        </FieldLabel>
        <Input id="settings-name" value="Alex Johnson" />
        <FieldDescription>This is your public display name.</FieldDescription>
      </Field>
      <Field data-invalid="true">
        <FieldLabel for="settings-slug">URL Slug</FieldLabel>
        <Input id="settings-slug" value="alex johnson" />
        <FieldError>
          Slug can only contain lowercase letters, numbers, and hyphens.
        </FieldError>
      </Field>
      <Field>
        <div class="flex items-center justify-between">
          <FieldLabel for="settings-bio">Bio</FieldLabel>
          <span class="text-muted-foreground text-xs">24/160</span>
        </div>
        <Textarea
          id="settings-bio"
          value="Software engineer & open source contributor."
          class="min-h-[80px]"
        />
        <FieldDescription>
          Brief description for your profile.
        </FieldDescription>
      </Field>
      <FieldSeparator />
      <Field orientation="horizontal">
        <FieldContent>
          <FieldTitle>Email Notifications</FieldTitle>
          <FieldDescription>
            Receive emails about account activity.
          </FieldDescription>
        </FieldContent>
        <Switch id="settings-email-notif" :default-value="true" />
      </Field>
      <Field orientation="horizontal">
        <FieldContent>
          <FieldTitle>Marketing Emails</FieldTitle>
          <FieldDescription>
            Receive emails about new features and tips.
          </FieldDescription>
        </FieldContent>
        <Switch id="settings-marketing" />
      </Field>
      <FieldSeparator />
      <Field orientation="horizontal">
        <Checkbox id="settings-terms" />
        <FieldContent>
          <FieldTitle>Terms of Service</FieldTitle>
          <FieldDescription>
            I agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
          </FieldDescription>
        </FieldContent>
      </Field>
      <Button class="w-full">Save Changes</Button>
    </FieldGroup>
  </div>
</template>