Forms · Async

Async validation and submission

An availability check, a slow save and a server rejection — all mocked, none of it a network request. The rules are the interesting part: an in-flight check is a quiet status, success is only shown for something that was actually checked, and a rejection is a form-level message.

import {
  Field,
  Form,
  FormActions,
  FormErrorSummary,
  FormSection,
  Input,
  SubmitButton,
} from "@luc/ui";

Examples

Availability check

React Hook Form's async `validate` rule drives the field; `Field` renders the three states. There is no spinner in the middle of the field — just a 14px arc next to a one-line message.

Workspace handle

Handle is available

last cleared check: —

<FormField
  name="handle"
  control={form.control}
  label="Workspace handle"
  description="Try “acme” or “research” to see a failed check."
  required
  validatingMessage="Checking availability…"
  successMessage="Handle is available"
  rules={{ required: "Pick a handle", minLength: { value: 3, message: "At least three characters" } }}
/>

Slow save, honest failure

The first submit fails on purpose. The button holds its width, the form keeps the values, and the failure lands in the summary instead of a toast that disappears after four seconds.

outcome: idle

<AsyncSubmitForm onOutcome={setOutcome} />

A form with no library at all

`Form` owns the lifecycle on its own. Validation here is plain JavaScript, the errors array is prepared by the page, and the summary/focus behaviour is identical to the React Hook Form version.

<PlainAsyncForm />

Usage

import { Form, FormErrorSummary, SubmitButton } from "@luc/ui/forms";

<Form onSubmit={save} errors={errors}>
  <Field label="Run ID">
    <Input name="runId" />
  </Field>
  <FormActions>
    <SubmitButton loadingText="Queueing">Queue run</SubmitButton>
  </FormActions>
</Form>

An async failure is a form-level message: the component renders it in the summary, and the fields keep their own validation messages.

API

This page shows components working together rather than exporting one of its own, so the props live on the pages below — each link opens that page's API table.

Formform
Fieldfield
Inputinput