stepper-command-dialog

StepperCommandDialog — Wizard Dialogs

StepperCommandDialog organizes a single command form across multiple named steps. Users navigate with Previous and Next buttons; Submit only appears on the last step when every field across all steps is valid.

Use this instead of CommandDialog when:

• The form has too many fields to show at once
• Fields can be grouped into logical stages (e.g. "Contact Info → Project Details → Summary")
• You want guided, linear input with per-step validation feedback
• The operation feels like a wizard or an onboarding flow

---

Step 1 — Define the command

A single command collects all fields across all steps. Each step contributes properties to the same command instance.

// Projects/CreateProject/CreateProject.cs — the slice file
[Command]
public record CreateProject(ProjectName Name, EmailAddress Email, Description Description, Money Budget)
{
    public ProjectCreated Handle() => new(Name, Email, Description, Budget);
}

Run a Debug dotnet build to generate the CreateProject TypeScript proxy before importing it.

---

Step 2 — Build the dialog component

import { StepperCommandDialog } from '@cratis/components/CommandDialog';
import { StepperPanel } from '@cratis/components/CommandDialog';
import { InputTextField, TextAreaField, NumberField } from '@cratis/components/CommandForm/fields';
import { DialogResult, useDialogContext } from '@cratis/arc.react/dialogs';
import { CreateProject } from '../api/Projects/CreateProject';

const CreateProjectDialog = () => {
    const { closeDialog } = useDialogContext();

    return (
        <StepperCommandDialog<CreateProject>
            command={CreateProject}
            title="Create New Project"
            okLabel="Create"
            onConfirm={() => closeDialog(DialogResult.Ok)}
            onCancel={() => closeDialog(DialogResult.Cancelled)}
        >
            <StepperPanel header="Contact Info">
                <InputTextField<CreateProject>
                    value={c => c.email}
                    title="Contact Email"
                    placeholder="Enter contact email"
                    type="email"
                />
            </StepperPanel>
            <StepperPanel header="Project Details">
                <InputTextField<CreateProject>
                    value={c => c.name}
                    title="Project Name"
                    placeholder="Enter project name"
                />
                <TextAreaField<CreateProject>
                    value={c => c.description}
                    title="Description"
                    placeholder="Describe the project"
                    rows={4}
                />
            </StepperPanel>
            <StepperPanel header="Budget">
                <NumberField<CreateProject>
                    value={c => c.budget}
                    title="Budget"
                    placeholder="Enter budget"
                />
            </StepperPanel>
        </StepperCommandDialog>
    );
};