# Form

> The wrapper every multi-field layout starts from: a native `<form>` laying its children out in a single spaced column, and the point where a parsed validation result enters the tree.

```ts
import { Form } from "@sdxc/ui";
```

Renders a native `<form>` laying children out in a single column, and
provides Form.Context so descendant fields resolve their own
issues by name and focus the first invalid field with no client JS. An
issue with no `path` names no field to attach to, so it renders as its
own leading `Alert` instead of being silently unreachable — a refusal
decided before any field was reached still reaches the person filling
the form in.

## Examples

```tsx
let result = parseSafe(ContactSchema, formData);
<Form method="post" issues={result.success ? undefined : result.issues}>
  <TextField name="email" label={t("contact.email")} />
  <Button type="submit">{t("contact.submit")}</Button>
</Form>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `issues?` | `ReadonlyArray<Issue>` | Validation issues from a `parseSafe` (or equivalent Standard Schema) result, provided to every descendant field through component context. Defaults to no issues, matching a first render. |

Also accepts everything in `TagProps<"form">`.


## Also exported

- `readFormContext`
- `resolveFieldIssue`