Skip to content

Features Overview

The unified <gui-form> component (React <GuiForm>, Angular <gui-form>, Lit <gui-form>, Vue <GuiForm>, Vanilla JS <gui-form>) takes a small set of inputs and produces a fully-rendered, validated, accessible form. How you wire engine knobs depends on which path you take — Programmatic groups them under formConfig, JSON exposes each as a standalone component prop.

This section walks through every feature you can plug in, in increasing order of depth. Each page is self-contained — read what you need, skip the rest.

InputDescription
formDefAn array of gui.* shortcuts. See Form Definition API.
dataThe initial form data object.
formConfigEngine wiring container: widgetLoaders, itemRenderers, customValidators, dependencies, validateOn, states.
formSelectorsGSL selectors that decorate widgets by type, tag, or uid.
localizationi18n translator (e.g. i18next).
formEventCallback for events emitted by widgets.
formHealthCallback that reports the live validation status of the form.
  • Widget Loaders — register the UI widgets the form can render.
  • Item Renderers — supply custom item templates for dropdown, list, and similar widgets.
  • Validators — declarative validation rules with localized error messages.
  • Middlewares — intercept the store to add logging, persistence, or schema validation.
  • Form Events — listen to widget events and react in your application code.
  • i18n — wire i18next or any other translator and localize labels, placeholders, validators, and dates.
  • String Interpolation — embed live form data, metadata, and expressions directly in widget text props using {{...}} template slots.
  • Dependencies — inject third-party helpers (e.g. a markdown parser) at the form level.
  • States — declare named conditions and use them to gate fields, override props, and compose behavior.