Form with validation errors

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group"
</script>

<template>
  <div class="mx-auto w-full max-w-xs">
    <FieldGroup>
      <Field data-invalid="true">
        <FieldLabel for="val-email">
          Email <span class="text-destructive">*</span>
        </FieldLabel>
        <InputGroup>
          <InputGroupAddon>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-mail"
              aria-hidden="true"
            >
              <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" />
              <rect x="2" y="4" width="20" height="16" rx="2" />
            </svg>
          </InputGroupAddon>
          <InputGroupInput
            id="val-email"
            type="email"
            value="invalid-email"
            placeholder="you@example.com"
          />
        </InputGroup>
        <FieldError>Please enter a valid email address.</FieldError>
      </Field>
      <Field data-invalid="true">
        <FieldLabel for="val-password">
          Password <span class="text-destructive">*</span>
        </FieldLabel>
        <InputGroup>
          <InputGroupAddon>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-lock"
              aria-hidden="true"
            >
              <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
              <path d="M7 11V7a5 5 0 0 1 10 0v4" />
            </svg>
          </InputGroupAddon>
          <InputGroupInput
            id="val-password"
            type="password"
            value="short"
            placeholder="Enter password"
          />
        </InputGroup>
        <FieldError
          :errors="[
            { message: 'Must be at least 8 characters.' },
            { message: 'Must contain at least one number.' },
          ]"
        />
      </Field>
      <Field>
        <FieldLabel for="val-confirm">Confirm Password</FieldLabel>
        <InputGroup>
          <InputGroupAddon>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-lock"
              aria-hidden="true"
            >
              <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
              <path d="M7 11V7a5 5 0 0 1 10 0v4" />
            </svg>
          </InputGroupAddon>
          <InputGroupInput
            id="val-confirm"
            type="password"
            placeholder="Repeat password"
          />
        </InputGroup>
        <FieldDescription>
          Re-enter your password to confirm.
        </FieldDescription>
      </Field>
      <Button class="w-full">Create Account</Button>
    </FieldGroup>
  </div>
</template>