Form | GistUI

Preview

Loading preview…

root = Form("invite", Input("email", "Work email", type:email, required), Select("role", "Role", ["Viewer", "Editor", "Admin"], value:"Editor"), Checkbox("terms", "I accept the terms", required), submit:"Send invite", success:"Invite sent.")

Submit it empty to see validation. A valid submit reaches onAction with typed values and a JSON Schema.

Signature

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

Form(name, ...children, id:str, validate:submit|blur|change, success:str, submit:str, draft:str)

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

Props

Prop	Type	How to write it	Notes
`name`	string	positional, required
`id`	string	named: `id:…`	stable id your app routes on
`validate`	`submit` · `blur` · `change`	named: `validate:…`	Default `"submit"`. when fields are checked
`success`	string	named: `success:…`	message shown after a valid submit
`submit`	string	named: `submit:…`	submit label; added if no primary Button
`draft`	string	named: `draft:…`	partial-save button label

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({ Form: MyForm });
<GistUI library={lib} stream={response.body} />;

<GistUI :source="answer" :components="{ Form: MyForm }" />

<GistUI source={answer} components={{ Form: MyForm }} />

<GistUI source={answer()} components={{ Form: MyForm }} />

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

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

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