Schema Validation

You can attach a schema (or any validation shape) to each step as a custom property. Stepperize does not run validation; you read the schema (e.g. stepper.state.current.data.schema) and use it with React Hook Form, Conform, Zod, etc. Below: examples with Zod (v4; for Zod 3 use z.string().email() instead of z.email()), ValiBot, and ArkType.

Zod

import {  } from "zod";
import {  } from "@stepperize/react";

const  = .({
  : .(),
  : .().(8),
});

type  = .<typeof >;

const {  } = (
  { : "personal", : "Personal Information", :  }
);

ValiBot

import * as  from "valibot";
import {  } from "@stepperize/react";

const  = .({
  : .(.(), .()),
  : .(.(), .(8)),
});

type  = .<typeof >;

const {  } = (
  { : "personal", : "Personal Information", :  }
);

ArkType

import {  } from "arktype";
import {  } from "@stepperize/react";

const  = ({
  : "string.email",
  : "string >= 8",
});

type  = typeof .;

const {  } = (
  { : "personal", : "Personal Information", :  }
);

Accessing schemas

Steps are plain objects; you can add a schema (or any key) to each step. Access via the stepper:

import * as React from "react";
import {  } from "zod";
import {  } from "@stepperize/react";

const  = .({
  : .().(1),
  : .(),
});

const  = .({
  : .().(1),
  : .().(1),
});

const {  } = (
  { : "personal", : "Personal", :  },
  { : "address", : "Address", :  }
);

function () {
  const  = ();

  // Current step object (includes schema if you added it)
  const  = ....;

  // Step by ID
  const  = ..("personal");
  const  = ?.;

  return <>Schema available: { ? "Yes" : "No"}</>;
}

Working with multiple schemas and steps

Let's say we have a series of steps and we will use them with forms, each of which has a validation schema. All you have to do is add the schemas with the key of your choice, and that's it.

Let's see how it works in a practical example with Zod.

import {  } from "zod";
import {  } from "@stepperize/react";

const  = .({
  : .().(1),
  : .().(1),
});

const  = .({
  : .(),
  : .().(8),
});

const  = .({});

const {  } = (
  {
    : "personal-info",
    : "Personal Information",
    : ,
  },
  {
    : "account",
    : "Account Information",
    : ,
  },
  {
    : "complete",
    : "Complete",
    : ,
  }
);

Steps are plain objects. The Step type does not define schema—it's a custom property you add for your own validation. Access it as stepper.state.current.data.schema or stepper.lookup.get(id)?.schema. The last step can have an empty schema or no schema; check for existence when needed.

Zod

ValiBot

ArkType

Accessing schemas

Working with multiple schemas and steps

On this page