Skip to content
{gui.}

Form Definition API

The Form Definition API is the Programmatic surface for declaring forms in GolemUI. You import a single gui namespace from @golemui/gui-shared and compose your form as an array of typed shortcut calls.

import { gui } from '@golemui/gui-shared';


const formDef = [
  gui.inputs.textInput('name', { label: 'Name' }),
  gui.inputs.dropdown('country', { items: ['US', 'CA'] }),
  gui.actions.button({ label: 'Submit', actionType: 'submit' }),
];

The same form can be written in JSON; both feed into the same <gui-form> component. What the Programmatic API gives you on top of compile-time safety, IDE autocomplete, and a much more compact syntax:

  • Tags — annotate widgets with metadata so you can target a whole subset (e.g. every 'identity' widget) without weaving the same prop into every shortcut.
  • Selectors — the behavior layer. Match widgets by type, tag, or uid and apply decorators in one place — invaluable when a form grows past a handful of fields and you want to keep cross-cutting concerns (placeholders, autocomplete, validation policy, per-state overrides) out of the form structure.
  • First-class event handling — every shortcut takes plain onClick / onChange / onLoad / onFilter / onBlur props (no nested on block), keyed strings that the engine routes through your formEvent callback so application logic and form structure stay decoupled.

Together those three turn the Programmatic surface into a real toolkit for complex forms — the kind where flat JSON would force you to repeat yourself or reach for a build step.

The gui namespace

Section titled “The gui namespace”

The API is grouped by widget kind:

GroupWhat it produces
gui.inputsInput widgets — text input, number, select, dropdown, calendar, repeater, etc.
gui.actionsButtons and other action widgets.
gui.displaysDisplay widgets — alert, markdown text, custom render functions.
gui.layoutsContainers — flex, grid, tabs, accordion.
gui.selectorsBehavior layer — decorate widgets by type, tag, or uid.

Each input/action/display/layout group also exposes a .custom(...) method for plugging in your own widgets.

Read the rest of this section

Section titled “Read the rest of this section”

See also

Section titled “See also”