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.submitButton({ label: 'Submit' }),
];

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

The gui namespace

The API is grouped by widget kind:

Group	What it produces
gui.inputs	Input widgets — text input, number, select, dropdown, calendar, repeater, etc.
gui.actions	Buttons and other action widgets.
gui.displays	Display widgets — alert, markdown text, custom render functions.
gui.layouts	Containers — flex, grid, tabs, accordion.
gui.selectors	Behavior 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

• How it works — the resolver pipeline.
• Tags — labelling widgets for the selector layer.
• Selectors — the behavior layer (gui.selectors).
• Custom Widgets — gui.<group>.custom(...).
• States — declaring named conditions.
• Conditionals — include, exclude, when.
• Events — onClick, onChange, onLoad, onFilter.
• API Reference:
  • gui.inputs
  • gui.actions
  • gui.displays
  • gui.layouts
  • gui.selectors

See also

• Getting Started / Installation — your first DX-driven form.
• Features Overview — what <gui-form> does with your form definition.