gui.inputs reference

Every input shortcut takes a path string and an optional props object. The props object inherits the widget’s typed WidgetProps, plus the DX-specific props (label, disabled, readonly, validator, defaultValue, uid, tags, size, states, include, exclude, onChange, onLoad, onFilter, onBlur).

When label (and placeholder, for inputs that accept one) is omitted, the engine derives one from path — gui.inputs.textInput('firstName') renders with the label First Name. See Sensible defaults / Auto-label for the exact transform, how to override, and how to suppress.

Signature

gui.inputs.<shortcut>(path: string, props?: Props, tags?: string[]): GuiInputsShortcut;

A fully-populated example, exercising most fields you’ll reach for:

gui.inputs.textInput(
  'user.email', // path — where the value lives in the form data
  {
    // props — the widget's typed props + DX fields
    label: 'Email',
    placeholder: 'you@example.com',
    hint: 'We never share your email.',
    disabled: false,
    readonly: false,
    autocomplete: 'email',
    defaultValue: '',
    validator: {
      required: true,
      format: 'email',
      messages: {
        required: 'Email is required',
        format: 'Enter a valid email',
      },
    },
    onChange: () => 'emailChanged', // wire a named event the form's `formEvent` callback receives
    states: {
      // per-state prop overrides — see /form-definition/states/
      registerMode: { label: 'Choose a sign-up email' },
    },
    include: { in: ['needsEmail'] },
  },
  ['identity'], // tags — addressable groups for selectors
);

Most shortcuts also accept a runtime-function variant for any individual prop — see Runtime Functions. For per-widget required props (e.g. dropdown’s items, repeater’s template), see the matching page in the Widgets Reference.

Shortcuts

Shortcut	Renders	Reference
gui.inputs.booleanInput	toggle	Toggle
gui.inputs.calendar	inline calendar	Calendar
gui.inputs.checkbox	checkbox	Checkbox
gui.inputs.currency	currency input	Currency
gui.inputs.custom	your custom input	Custom Widgets
gui.inputs.dateInput	date input (typed)	Date Input
gui.inputs.datePicker	date picker (popover calendar)	Date Picker
gui.inputs.dateTimeCalendar	inline calendar with time slots	Date Time Calendar
gui.inputs.dateTimeInput	date + time input (typed)	Date Time Input
gui.inputs.dateTimePicker	date time picker (popover)	Date Time Picker
gui.inputs.dropdown	dropdown (autocomplete)	Dropdown
gui.inputs.list	scrolling list	List
gui.inputs.markdown	markdown editor	Markdown
gui.inputs.numberInput	number input	Number Input
gui.inputs.password	password input	Password
gui.inputs.radiogroup	radio group	Radio Group
gui.inputs.rangeCalendar	range calendar	Range Calendar
gui.inputs.rangeDateInput	typed date range	Range Date Input
gui.inputs.rangeDatePicker	popover date range	Range Date Picker
gui.inputs.rangeDateTimeCalendar	inline date-time range calendar	Range Date Time Calendar
gui.inputs.rangeDateTimeInput	typed date-time range	Range Date Time Input
gui.inputs.rangeDateTimePicker	popover date-time range	Range Date Time Picker
gui.inputs.rangeTimeInput	typed time range	Range Time Input
gui.inputs.rangeTimePicker	popover time range	Range Time Picker
gui.inputs.repeater	repeater	Repeater
gui.inputs.select	select	Select
gui.inputs.tags	tags input (removable chips)	Tags
gui.inputs.textarea	multi-line text	Textarea
gui.inputs.textInput	text input	Textinput
gui.inputs.timeInput	time input (typed)	Time Input
gui.inputs.timePicker	time picker (popover slots)	Time Picker

For each widget, refer to the matching reference page for the full prop list and live demos.