# Form

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
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>
```
  </div>
  <div slot="react">
```tsx
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>
  );
}
```
  </div>
</FrameworkCodeSwitcher>

> **Info:** Form remains a native HTML form. The Runtime adds validation timing, field coordination, and an
accessible error summary without requiring React or a form-state library.

## Installation

```bash
npx starwind@latest add form
```

## Usage

The browser still owns submission and `FormData`. Use ordinary `action`, `method`, `submit`, and
`reset` behavior; Runtime controls serialize through their installed hidden inputs.

## Framework Availability
Form is available for Astro and React.
Astro available; React available
| Framework | Status | Notes |
| --- | --- | --- |
| Astro | available | - |
| React | available | - |
## API Reference
### Form
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `errorVisibility` | `import("@starwind-ui/runtime/form").FormValidationTiming` | No | - | Primitive override | Selects when validation errors become visible. |
| `revalidationTiming` | `import("@starwind-ui/runtime/form").FormValidationTiming` | No | - | Primitive override | Selects when a previously validated field is validated again. |
| `validationTiming` | `import("@starwind-ui/runtime/form").FormValidationTiming` | No | - | Primitive override | Selects when validation first runs. |
- Inherits form attributes.

### FormErrorSummary
- Inherits div attributes.
### Primitive And Runtime API
Behavior, state, events, form participation, and imperative methods are documented in the lower-level references.
- Primitive: [Form Primitive](/docs/primitives/form/)
- Runtime factory: [`createForm`](/docs/runtime/#create-form) from `@starwind-ui/runtime/form`

## Changelog

### v1.0.0

- Added Runtime-backed native form coordination and validation timing.
- See the [Form Primitive](/docs/primitives/form/) for the underlying unstyled anatomy and behavior API.