Process steps

Process steps · sample rowDesktopTabletPhoneOpen ↗

Renders ProcessStepsBlock from @bison-lab/ui. Steps are numbered by position and reordered by drag and drop; there is deliberately no per-step number override. Three to six steps, opening with three.

Auto-advance is always off for visitors who prefer reduced motion, whatever the field says.

Usage

payload.config.ts / collections

import { ProcessStepsBlock } from "@bison-lab/payload-blocks";

// In the collection's `blocks` array:
ProcessStepsBlock

blocks/registry.ts

import { ProcessStepsBlockRenderer } from "@bison-lab/payload-blocks/react";

// In the site's registry:
processSteps: ProcessStepsBlockRenderer,

Fields

Field	Type	Notes
items *	array	3 to 6 rows. Opens with 3 empty rows; the admin field will not remove below that.
items[].title *	text
items[].description *	textarea
items[].image *	upload	From the media collection.
autoAdvance	checkbox	Advance on a timer. Always off for visitors who prefer reduced motion. Default true.
autoAdvanceDuration	number	Milliseconds each step holds before advancing. At least 1000. Default 6000.
pauseOnHover	checkbox	Default true.
defaultActiveIndex	number	Which step is active on load, counting from 0. At least 0. Default 0.

* required.