Input

Single‑line text input field that supports multiple HTML input types (text, email, password, number, tel, url). It provides a label, optional placeholder, validation options, and data‑binding capabilities.

Use Cases

• Text input fields (names, titles, descriptions)
• Email address input with validation
• Password fields with masked input
• Number inputs with min/max constraints
• Phone number inputs
• URL inputs with validation
• Data‑bound fields connected to page data sources

Properties

name

Unique field name used for form submission and data binding. Should be camelCase. Type: string. Required.

label

Label text displayed above input field. Should be clear and descriptive. Type: string. Required.

Tip: Use clear, specific labels (e.g., “Email Address” not “Email”). Use Title Case. Required indicator is added automatically when required: true; do not add an asterisk manually.

placeholder

Placeholder text shown inside empty input field. Use for examples or hints. Type: string.

Tip: Provide realistic examples (e.g., “e.g., john@example.com”). Show expected format (e.g., “e.g., (555) 123‑4567”). Do not repeat the label as placeholder.

inputType

HTML input type – controls validation, mobile keyboard, and display behavior. Type: string. Options: text, email, password, tel, url, number. Default: text.

Tip: Use email for email addresses, tel for phone numbers, password for passwords, url for website links, and number for numeric fields. Visual impact varies per option (e.g., email shows email keyboard, number shows numeric spinners).

required

Whether field is required for form submission. Automatically shows asterisk indicator. Type: boolean. Default: false.

Tip: Adds a red asterisk (*) to the label and enables browser validation on submit.

defaultValue

Default value pre‑filled in input field (not used when dataBinding is set). Type: string.

min

Minimum value for number inputs (only used when inputType is “number”). Type: number.

max

Maximum value for number inputs (only used when inputType is “number”). Type: number.

step

Increment step for number inputs (only used when inputType is “number”). Type: number.

Tip: Use step 1 for whole numbers, step 0.01 for currency, step 5 or 10 for larger increments.

width

CSS width of the input field container. Use for controlling field width in layouts. Type: string.

Tip: Use “100%” for full‑width fields, “300px” for short fields, “50%” when placing fields side‑by‑side.

pattern

Regular expression pattern for HTML5 validation. Use for custom validation rules. Type: string.

Tip: Example patterns – “[0-9]{5}” for US ZIP codes, “[A-Z]{2}[0-9]{6}” for country‑specific postal codes, “^[a-zA-Z0-9]+$” for alphanumeric‑only fields.

validation

Validation type for the input field. ALWAYS set validation: 'email' for email inputs, validation: 'phone' for phone inputs, validation: 'url' for URL inputs. Type: string. Options: none, email, phone, phone-us, url, zip-us, zip-ca, alphanumeric, letters-only, numbers-only. Default: none.

Tip: Align validation with inputType (e.g., email → validation ‘email’, tel → validation ‘phone’).

maxLength

Maximum number of characters allowed in the input field. Type: number.

Tip: Use 50‑100 for names/titles, 255‑500 for short descriptions, match database VARCHAR limits.

customCss

Custom CSS styles for advanced styling. Parsed as CSS property‑value pairs. Type: string.

Security Note: Parsed by a CSS parser; tenants only affect their own pages.

focusEffect

Focus animation effect when user clicks/tabs into the input field. Type: string. Options: none, glow, underline, outline, scale. Default: glow.

Tip: Use “glow” for most forms, “underline” for minimal designs, “outline” for high‑contrast accessibility, “scale” for playful interfaces, “none” for enterprise apps where animation may be distracting.

validationShake

Whether to shake the input horizontally when validation fails. Provides immediate visual feedback for errors. Type: boolean. Default: true.

Tip: Keep enabled for clear feedback; disable for enterprise contexts where animation feels unprofessional.

dataBinding

Data binding configuration to connect input to a page data source field. Enables auto‑population and save functionality. CRITICAL for EDIT/DETAIL/CREATE pages. Type: object.

Tip: ALWAYS add dataBinding on EDIT/DETAIL/CREATE pages so inputs populate with row data and save correctly. Ensure the page’s root.props.pageDataSources are configured first.

Sub‑properties:

• pageDataSourceId (string, required): ID of the page‑level data source (matches root.props.pageDataSources[].id).
• field (string, required): Field/column name in the data source to bind to (should match the database column name).

Best Practices

• CRITICAL: Group related Input fields in Grid or Flex for professional multi‑column layouts.
• DO NOT stack all Input fields at full width – use Grid with numColumns: 2 for side‑by‑side pairs.
• Always set label for accessibility and clarity.
• Use appropriate inputType for validation and mobile keyboard optimization (email, tel, url, number).
• Set placeholder with helpful examples (e.g., “e.g., john@example.com”).
• Mark required fields with required: true.
• Use dataBinding to connect to page data sources for edit forms.
• Use focusEffect: 'glow' (default) for modern polish – inputs have smooth focus animations.
• Keep validationShake: true (default) for clear validation feedback – shakes on errors.

Common Mistakes

Stacking all Input fields at full width without using Grid/Flex

Why it's a problem: Creates long, monotonous forms that waste horizontal space and feel unprofessional.

Fix: Group related Input fields in Grid with numColumns: 2 (First Name + Last Name, Email + Phone).

Using inputType: 'text' for email, phone, or number inputs

Why it's a problem: Misses browser validation, mobile keyboard optimization, and better UX.

Fix: Use inputType: 'email' for emails, inputType: 'tel' for phones, inputType: 'number' for numbers, inputType: 'url' for URLs.

Not setting validation for email/phone/url fields

Why it's a problem: Without explicit validation, invalid data can be submitted – no error message shown to user.

Fix: ALWAYS set validation: 'email' for email fields, validation: 'phone' for phone fields, validation: 'url' for URL fields.

Not setting placeholder with helpful examples

Why it's a problem: Users unsure of expected format – leads to validation errors and frustration.

Fix: Add placeholder with realistic example: “e.g., john@example.com” for email, “e.g., (555) 123‑4567” for phone.

Using vague labels like 'Name', 'Email', 'Number'

Why it's a problem: Ambiguous – users don’t know if “Name” means first name, full name, or company name.

Fix: Be specific: “First Name”, “Email Address”, “Phone Number”, “Company Name”.

Not setting required: true for mandatory fields

Why it's a problem: No visual indicator for required fields – users submit incomplete forms and get errors.

Fix: Set required: true for mandatory fields (automatically shows asterisk indicator).

NOT adding dataBinding to Input components on EDIT/DETAIL/CREATE pages

Why it's a problem: Inputs remain EMPTY even though user clicked a row in DataGrid to view/edit record. This is the #1 most common and frustrating issue for users!

Fix: ALWAYS add dataBinding property to ALL form inputs on EDIT/DETAIL/CREATE pages. Configure root.props.pageDataSources first, then add dataBinding to each Input with pageDataSourceId and field.