Skip to content
LogoLogo

How to render a step form

This guide shows you how to render the fields of the active step and let a visitor submit them.

1. Put the steps in a router

StepRouter watches the step state and activates the Step whose id matches.

import { StepRouter, Step } from '@picked/react/router'
 
function MyExperience() {
  return (
    <StepRouter>
      <Step id="welcome">
        <WelcomeScreen />
      </Step>
      <Step id="contact">
        <ContactForm />
      </Step>
    </StepRouter>
  )
}

2. Render the fields

Bind form.props to your <form> element and map over the fields.

import { useStep, useStoreGlobal } from '@picked/react/hooks'
 
function StepForm() {
  const { fields, form } = useStep()
  const currentFields = useStoreGlobal(fields)
  const isSubmitting = useStoreGlobal(form.submitting)
 
  return (
    <form {...form.props}>
      {currentFields.map((field) => (
        <div key={field.id}>
          <label htmlFor={field.id}>{field.label}</label>
          <input
            id={field.id}
            name={field.id}
            value={field.value ?? ''}
            onChange={field.onChange}
            onBlur={field.onBlur}
          />
          {field.error && field.touched && <p className="error">{field.error.userMessage}</p>}
        </div>
      ))}
      <button type="submit" disabled={isSubmitting}>Continue</button>
    </form>
  )
}

The SDK checks a field on blur, and not while the visitor types.

3. Load a large step lazily

Pass a dynamic import to the component prop of <Step>. The SDK does not load the content until that step becomes active.