Form

Native-constraint form that focuses the first invalid field. Form is a React <form> that runs checkValidity(), accepts a server errors map keyed by field name, and does not replace @var-ui/form useForm. A truthy errors entry blocks submit; the app owns clearing it — Form does not reset errors when the control changes.

There is no @var-ui/astro Form. Native required works in Astro without Form; focus-first-invalid is React-only.

Examples

Default

Submit with empty required fields to see native messages and focus on the first invalid control.

import { Button, Field, Form } from '@var-ui/react';

<Form>
  <Field.Root name="email">
    <Field.Label>Email</Field.Label>
    <Field.Control>
      <input name="email" type="email" required />
    </Field.Control>
    <Field.Error />
  </Field.Root>
  <Field.Root name="name">
    <Field.Label>Name</Field.Label>
    <Field.Control>
      <input name="name" required />
    </Field.Control>
    <Field.Error />
  </Field.Root>
  <Button type="submit">Save</Button>
</Form>

Composition with useForm

useForm stays the values, touched, and validators helper. Pass errors={form.errors} and keep FieldMeta on TextField:

const form = useForm({
  initialValues: { email: '' },
  validate: { email: isEmail('Enter a valid email') },
});

<Form onSubmit={() => void form.handleSubmit(save)()} errors={form.errors}>
  <TextField {...form.getInputProps('email')} label="Email" />
</Form>;

Props

Accessibility

Form is React-only; native required works in Astro without Form. On invalid submit, focus moves to the first [aria-invalid="true"] or :invalid control.