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.

How to define them

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).

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: [
      /* ... */
    ],
  }),
];

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

Same outcome in JSON — props are nested under props, and every validator carries an explicit type discriminator:

{
  "form": [
    {
      "kind": "input",
      "type": "textinput",
      "path": "user.firstName",
      "label": "First name",
      "validator": { "type": "string", "required": true, "minLength": 2 }
    },
    {
      "kind": "input",
      "type": "number",
      "path": "user.age",
      "validator": { "type": "number", "minimum": 0 }
    },
    {
      "kind": "input",
      "type": "dropdown",
      "path": "user.country",
      "props": { "items": [] }
    },
    {
      "kind": "input",
      "type": "repeater",
      "path": "contacts",
      "props": { "template": [] }
    }
  ]
}

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
Calendar	gui.inputs.calendar	Calendar
Checkbox	gui.inputs.checkbox	Checkbox
Currency	gui.inputs.currency	Currency
Custom	gui.inputs.custom	Custom Widgets
Date Input	gui.inputs.dateInput	Date Input
Date Picker	gui.inputs.datePicker	Date Picker
Date Time Calendar	gui.inputs.dateTimeCalendar	Date Time Calendar
Date Time Input	gui.inputs.dateTimeInput	Date Time Input
Date Time Picker	gui.inputs.dateTimePicker	Date Time Picker
Dropdown	gui.inputs.dropdown	Dropdown
List	gui.inputs.list	List
Markdown	gui.inputs.markdown	Markdown
Number	gui.inputs.numberInput	Number Input
Password	gui.inputs.password	Password
Radio Group	gui.inputs.radiogroup	Radio Group
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
Range Date Time Calendar	gui.inputs.rangeDateTimeCalendar	Range Date Time Calendar
Range Date Time Input	gui.inputs.rangeDateTimeInput	Range Date Time Input
Range Date Time Picker	gui.inputs.rangeDateTimePicker	Range Date Time Picker
Range Time Input	gui.inputs.rangeTimeInput	Range Time Input
Range Time Picker	gui.inputs.rangeTimePicker	Range Time Picker
Repeater	gui.inputs.repeater	Repeater
Select	gui.inputs.select	Select
Tags	gui.inputs.tags	Tags
Textarea	gui.inputs.textarea	Textarea
Textinput	gui.inputs.textInput	Textinput
Time Input	gui.inputs.timeInput	Time Input
Time Picker	gui.inputs.timePicker	Time Picker
Toggle	gui.inputs.booleanInput	Toggle

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.