Step

root = Form("signup", Step("Account", Input("email", "Email", type:email, required), Input("password", "Password", type:password, minLength:8, required)), Step("Profile", Input("name", "Full name", required), Select("team", "Team size", ["1–10", "11–50", "51+"])), submit:"Create account")

Continue validates the current step before moving on.

Signature

This is the line a model reads in the system prompt.

Step(title, ...children, hint:str)

• Group: Forms
• Children: Yes: any component or text
• Positional arguments: title (a trailing ? means it may be left out)

Props

Use your own component

Keep the name and schema, swap what is drawn. The prompt and the model’s output do not change.

import { ui } from "@gistui/react/ui";

const lib = ui.extend({ Step: MyStep });
<GistUI library={lib} stream={response.body} />;

<GistUI :source="answer" :components="{ Step: MyStep }" />

<GistUI source={answer} components={{ Step: MyStep }} />

<GistUI source={answer()} components={{ Step: MyStep }} />

import { ui } from "@gistui/vanilla/ui";

const lib = ui.extend({ Step: (ctx) => ({ el: myElement(ctx) }) });

See Custom components for the full contract. Style hook: [data-gistui="Step"].