Label with error state

<script setup lang="ts">
import { Field, FieldError } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
</script>

<template>
  <Field class="w-full max-w-xs" data-invalid="true">
    <Label for="label-error">Email</Label>
    <Input
      id="label-error"
      type="email"
      value="invalid-email"
      aria-invalid="true"
    />
    <FieldError>Please enter a valid email address</FieldError>
  </Field>
</template>