Skip to main content

Input Widget Overview

The Input Widget is a single-field input component in Buildocs UI Engine. It adapts its behavior, validation, and formatting based on the selected input mode.

Input Modes​

The widget supports eight input modes. The selected mode determines:

  • The type of data accepted
  • The UI control rendered (text field, date picker, phone mask, etc.)
  • The formatting and validation rules applied
  • Which configuration properties are available in the properties panel

Mode selection changes both the runtime behavior and the available settings in the properties panel.

Text​

Standard single-line text input.

Behavior​

  • Accepts arbitrary text input
  • Supports predefined or custom regex validation
  • Updates the form value on blur (or on input on mobile devices)
  • Optional uppercase enforcement

Typical Use Cases​

  • Names, descriptions, notes
  • Codes and identifiers
  • Free-text fields

Text with Copy​

Text input with a built-in copy-to-clipboard button.

Behavior​

  • Identical to Text mode, with an additional copy button rendered adjacent to the field
  • Clicking the button copies the current value to the clipboard
  • The button tooltip changes to "Copied!" after a successful copy

Typical Use Cases​

  • Reference codes and generated values
  • Read-only display fields where users need quick copy access

Date​

A date picker input.

Behavior​

  • Renders a calendar-based date picker control
  • Returns the selected value as an ISO 8601 UTC string
  • Supports custom date format configuration
  • Locale-aware rendering

Typical Use Cases​

  • Delivery dates, due dates
  • Scheduled or planned dates
  • Date of birth

Time​

A time picker input.

Behavior​

  • Renders a time picker control
  • Returns the selected value as an ISO 8601 UTC string
  • Supports predefined default values: current time or start of day

Typical Use Cases​

  • Appointment and scheduled times
  • Start and end time fields

Date & Time​

A combined date and time picker.

Behavior​

  • Renders a combined date and time picker control
  • Returns the selected value as an ISO 8601 UTC string
  • Supports custom format configuration and locale-aware rendering

Typical Use Cases​

  • Event start and end timestamps
  • Log entry timestamps
  • Booking and reservation fields

Phone​

A phone number input with configurable mask formatting.

Behavior​

  • Applies an input mask to guide phone number entry (e.g., (___) ____-____)
  • Validates against a regex pattern if configured
  • Updates the form value on blur (or on input on mobile devices)

Typical Use Cases​

  • Contact and mobile phone numbers
  • Fax numbers

Currency​

A numeric input with currency and number formatting support.

Behavior​

  • Formats values with locale-based or explicit currency formatting
  • Supports locale-based, fixed-locale, or explicit currency formatting
  • Can read the currency code dynamically from another form field
  • Right-aligns text by default
  • Defaults to 0 on initial render

Typical Use Cases​

  • Prices and monetary amounts
  • Invoice line totals
  • Budget and cost fields

Password​

A password input with a show/hide visibility toggle.

Behavior​

  • Masks input as password type by default
  • Displays a visibility toggle button (eye icon) as an input adornment
  • Toggling reveals the input as plain text

Typical Use Cases​

  • Login forms
  • Password change and confirmation fields
  • Sensitive data entry

Mode-Specific Configuration​

The properties panel adapts dynamically to the selected mode.

Configuration AreaDescription
Shared propertiesCommon layout, labeling, and validation settings available in all modes
Mode-specific propertiesFormatting, masking, and behavior options specific to the selected mode

Only properties relevant to the active mode are displayed, reducing configuration complexity and preventing invalid combinations.