Guide a multi-step flow with selectable option cards

At a glanceCopy Anchor Link

• Who: Developers building onboarding, setup, or checkout flows.
• What: Step indicator plus selectable option cards with state.
• Use when: For 2–6 step flows with choices per step.
• Avoid when: For single forms — use Form instead of inventing steps.
• See also: Build validated forms with labels, errors, and pending state

PreviewCopy Anchor Link

InstallCopy Anchor Link

pnpm add @zedtech/zedkit-ui

Latest: 0.3.0 (via changesets).

ExampleCopy Anchor Link

import { OptionCards, WizardSteps } from "@zedtech/zedkit-ui";
const [picked, setPicked] = useState(["a", "b"]);
<WizardSteps steps={["Pick", "Configure", "Test"]} current={0} />
<OptionCards options={options} selected={picked} onChange={setPicked} />

Wraps: none (native inputs + theme tokens)

PropsCopy Anchor Link