Input Widgets Overview

Input widgets are the workhorses of any form. Each one binds to a path in the form data, supports validators, tracks touched state, and emits onChange / onBlur events as the user interacts with it.

The DX shortcuts

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

const formDef = [
  gui.inputs.textInput('user.firstName', {
    label: 'First name',
    validator: { required: true, minLength: 2 },
  }),
  gui.inputs.numberInput('user.age', { validator: { minimum: 0 } }),
  gui.inputs.dropdown('user.country', { items: [/* ... */] }),
  gui.inputs.repeater('contacts', { template: [/* ... */] }),
];

The first argument is always the data path. The optional second argument is the props object — flat for typed inputs (no nested props: {} like the JSON shape requires).

For the full per-widget signature list, see gui.inputs reference.

JSON form

The same widget in JSON, with props nested:

{
  "form": [
    {
      "kind": "input",
      "type": "textinput",
      "path": "user.firstName",
      "label": "First name",
      "validator": { "type": "string", "required": true, "minLength": 2 }
    }
  ]
}

Property	Description
uid	Optional unique id; one is generated if absent.
kind	MANDATORY. Always 'input'.
type	MANDATORY. The widget type (textinput, dropdown, etc.).
path	MANDATORY. Dot-separated path in the form data (e.g. user.firstName).
label	Visible label text. Accepts a Localizable ({ key, default }) for i18n.
validator	Validation rules. See Features / Validators.
props	Widget-specific configuration. See each widget’s reference page.

Available widgets

Widget	DX shortcut	Reference
Textinput	gui.inputs.textInput	Textinput
Number	gui.inputs.numberInput	Number Input
Toggle	gui.inputs.booleanInput	Toggle
Password	gui.inputs.password	Password
Currency	gui.inputs.currency	Currency
Checkbox	gui.inputs.checkbox	Checkbox
Radio Group	gui.inputs.radiogroup	Radio Group
Select	gui.inputs.select	Select
Dropdown	gui.inputs.dropdown	Dropdown
List	gui.inputs.list	List
Textarea	gui.inputs.textarea	Textarea
Markdown	gui.inputs.markdown	Markdown
Calendar	gui.inputs.calendar	Calendar
Date Input	gui.inputs.dateInput	Date Input
Date Picker	gui.inputs.datePicker	Date Picker
Range Calendar	gui.inputs.rangeCalendar	Range Calendar
Range Date Input	gui.inputs.rangeDateInput	Range Date Input
Range Date Picker	gui.inputs.rangeDatePicker	Range Date Picker
Repeater	gui.inputs.repeater	Repeater
Custom	gui.inputs.custom	Custom Widgets

See also

• gui.inputs reference — every input shortcut signature.
• Features / Validators — validation rules per type.
• Features / Item Renderers — custom item templates for dropdown, list, radiogroup.