Form

---
import { Button } from "@/components/starwind/button";
import { Field, FieldControl, FieldError, FieldLabel } from "@/components/starwind/field";
import { Form, FormErrorSummary } from "@/components/starwind/form";
---

<Form validationTiming="onBlur" revalidationTiming="onInput">
  <FormErrorSummary aria-label="Profile errors">Review the highlighted fields.</FormErrorSummary>
  <Field name="email">
    <FieldLabel>Email</FieldLabel>
    <FieldControl type="email" required />
    <FieldError match="valueMissing">Enter your email address.</FieldError>
    <FieldError match="typeMismatch">Enter a valid email address.</FieldError>
  </Field>
  <Button type="submit">Save profile</Button>
</Form>

import { Button } from "@/components/starwind/button";
import { Field, FieldControl, FieldError, FieldLabel } from "@/components/starwind/field";
import { Form, FormErrorSummary } from "@/components/starwind/form";

export function Example() {
  return (
    <Form validationTiming="onBlur" revalidationTiming="onInput">
      <FormErrorSummary aria-label="Profile errors">Review the highlighted fields.</FormErrorSummary>
      <Field name="email">
        <FieldLabel>Email</FieldLabel>
        <FieldControl type="email" required />
        <FieldError match="valueMissing">Enter your email address.</FieldError>
        <FieldError match="typeMismatch">Enter a valid email address.</FieldError>
      </Field>
      <Button type="submit">Save profile</Button>
    </Form>
  );
}