Wizard

import { Button, ErrorMessage, Field, Form, Label, Stack, Text } from '@tounsoo/todae';

<Form.Root
  ref={(element) => {
    forms.current[0] = element;
  }}
  hidden={step !== 0}
  aria-labelledby={headingIds[0]}
  errors={0 <= reached ? pick(reply, STEPS[0].fields) : {}}
  onSubmit={next(0)}
>
  <Stack.Root gap="normal">
    <Text.Root
      as="h2"
      id={headingIds[0]}
      ref={(element) => {
        headings.current[0] = element;
      }}
      tabIndex={-1}
    >
      <Text.Root as="span" variant="label" style={{ display: 'block' }}>
        Step 1 of 3
      </Text.Root>
      Account
    </Text.Root>
    <Field.Group>
      <Label.Root htmlFor={emailId}>Work email</Label.Root>
      <Field.Root id={emailId} name="email">
        <Field.TextInput type="email" required value={answers.email} onValueChange={set('email')} />
      </Field.Root>
      <ErrorMessage.Root />
    </Field.Group>
    <Button.Root type="submit">Next</Button.Root>
  </Stack.Root>
</Form.Root>

import { useLayoutEffect, useRef, useState, type SubmitEvent } from 'react';

const [step, setStep] = useState(0);
// The furthest step shown since the last reply: each gets its errors from then until its own Next.
const [reached, setReached] = useState(-1);
const forms = useRef<(HTMLFormElement | null)[]>([]);
const headings = useRef<(HTMLElement | null)[]>([]);
// Set once the person moves, so the first render doesn't take focus.
const moved = useRef(false);

useLayoutEffect(() => {
  if (!moved.current) return;
  // Form.Root moves focus for a reply in an update from its own layout effect, which React renders
  // before this microtask, so a control it focused keeps focus.
  queueMicrotask(() => {
    if (!forms.current[step]?.contains(document.activeElement)) headings.current[step]?.focus();
  });
}, [step]);

const go = (index: number) => {
  moved.current = true;
  setReached((current) => Math.max(current, index));
  setFailed(null);
  setStep(index);
};

// Form.Root calls onSubmit once the step's controls pass its check.
const next = (index: number) => (event: SubmitEvent<HTMLFormElement>) => {
  event.preventDefault();
  // Moving on sends the step again: drop its errors, as Form.Root asks.
  setReply((current) => pick(current, STEPS[index].fields, false));
  go(index + 1);
};

import { Steps, type StepsStatus } from '@tounsoo/todae';

function statusOf(index: number, step: number): StepsStatus {
  if (index < step) return 'done';
  return index === step ? 'current' : 'pending';
}

<Steps.Root variant="progress" aria-label="Sign-up steps">
  {STEPS.map((each, index) => (
    <Steps.Item key={each.title} status={statusOf(index, step)}>
      {each.title}
    </Steps.Item>
  ))}
</Steps.Root>

import type { FormErrors } from '@tounsoo/todae';

type Name = 'name' | 'email' | 'workspace' | 'plan';

const STEPS: readonly { title: string; fields: readonly Name[] }[] = [
  { title: 'Account', fields: ['name', 'email'] },
  { title: 'Workspace', fields: ['workspace', 'plan'] },
  { title: 'Review', fields: [] },
];

// The entries of a reply that belong, or don't belong, to a step's controls.
function pick(reply: FormErrors, fields: readonly string[], keep = true): FormErrors {
  return Object.fromEntries(Object.entries(reply).filter(([name]) => fields.includes(name) === keep));
}

const create = async (event: SubmitEvent<HTMLFormElement>) => {
  event.preventDefault();
  if (sending) return;
  // Hold Back and Create with aria-disabled while this is true.
  setSending(true);
  setFailed(null);
  setReply({});
  let errors: FormErrors;
  try {
    errors = await createWorkspace(answers);
  } catch {
    // Shown in an Alert.Root tone="critical" beside the button, which is announced.
    return setFailed("The workspace wasn't created. Try again.");
  } finally {
    setSending(false);
  }
  const named = Object.entries(errors).filter(([, text]) => text);
  if (named.length === 0) return setCreated(true);
  // An error for a control no step holds can't be shown where it belongs: the request failed.
  if (named.some(([name]) => !STEPS.some((each) => each.fields.includes(name as Name)))) {
    // Trying again won't change the answer, so don't ask for it.
    return setFailed("The workspace wasn't created, for a reason this form can't show. Contact support.");
  }
  const first = STEPS.findIndex((each) => each.fields.some((name) => errors[name]));
  setReply(errors);
  // A new reply: no step has its errors yet.
  setReached(-1);
  go(first);
};