Get Started

FormStep

Place FormStep directly inside Form to enable automatic progress and Next/Back controls. Next validates the current step and shared fields. Save validates every step and opens the first invalid one. Inactive fields remain mounted and enabled, preserving edits and complete submission data.

This is a LongLink-specific component.

longlink docs --component "FormStep"
  1. Identity
  2. Contact
/** Creates a person using automatic step navigation. */
export default function CreatePerson() {
  return (
    <Form action="/api/people" submitLabel="Create person">
      <FormStep label="Identity">
        <TextInput name="name" label="Name" required />
      </FormStep>
      <FormStep label="Contact">
        <TextInput name="email" label="Email" type="email" required />
      </FormStep>
    </Form>
  );
}