form-builder

Appearance

JsonFormSteps ​

The steps of a form, from its layout. A form without steps in its layout has one.

Definition ​

  • JsonFormSteps
    • list readonly LayoutStep[]: the steps on show. A hidden step is left out, unless it is the current one
    • index number: the index of the current step in list
    • current LayoutStep: the step <JsonFields> renders
    • isFirst boolean
    • isLast boolean
    • next () => Promise<boolean>: validates, and moves on when the step's fields have no issues. Resolves to whether it moved
    • back () => void: moves back, without validating
    • goTo (index: number) => Promise<boolean>: moves back freely, or forward through each step on the way, stopping at the first with issues

Explanation ​

See multi-step forms for how the steps validate.

Example ​

tsx
import { Form } from '@formisch/react'
import type { JsonForm } from '@whatsaaaa/form-builder-schema'
import { JsonFields, useJsonForm } from '@whatsaaaa/form-builder-react'
import { components } from './all-fields'
import { layoutComponents } from './layout'

export function SignUpSteps({ definition }: { definition: JsonForm }) {
  const jsonForm = useJsonForm(definition, { components, layoutComponents })
  const { steps } = jsonForm

  function save(output: unknown) {
    console.log(output)
  }

  return (
    <Form of={jsonForm.form} onSubmit={save}>
      <ol>
        {steps.list.map((step, index) => (
          <li
            key={step.step.id ?? index}
            aria-current={index === steps.index ? 'step' : undefined}
          >
            {step.step.label}
          </li>
        ))}
      </ol>
      <JsonFields of={jsonForm} />
      {!steps.isFirst && (
        <button type="button" onClick={steps.back}>
          Back
        </button>
      )}
      {steps.isLast ? (
        <button type="submit">Sign up</button>
      ) : (
        <button type="button" onClick={() => void steps.next()}>
          Next
        </button>
      )}
    </Form>
  )
}

Types ​