Input

Single-line text input field with support for various input types (text, email, password, number, tel, url). Includes label, placeholder, validation, 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. Recommendations: Use clear, specific labels: ‘Email Address’ not ‘Email’, ‘Phone Number’ not ‘Phone’; Use Title Case for labels; Required indicator automatically shown when required: true – don’t add asterisk to label.

placeholder

Placeholder text shown inside empty input field. Use for examples or hints. Type: string. Recommendations: Provide realistic examples: ‘e.g., john@example.com’ for email; Show expected format: ‘e.g., (555) 123-4567’ for phone; Don’t repeat the label as placeholder – add value with examples.

inputType

HTML input type - controls validation, mobile keyboard, and display behavior. Type: string. Options: text, email, password, tel, url, number. Default: text. Visual Impact: text – Standard text input - shows normal keyboard on mobile; email – Email validation + email keyboard on mobile (@, .com keys); password – Masked text for secure password entry; tel – Telephone keyboard on mobile (numeric keypad); url – URL validation + URL keyboard on mobile (.com, :// keys); number – Numeric input with up/down spinners + numeric keyboard on mobile. Recommendations: Always use inputType: ‘email’ for email addresses (validation + better mobile keyboard); Use inputType: ‘tel’ for phone numbers (numeric keyboard on mobile); Use inputType: ‘password’ for password fields (masked input); Use inputType: ‘url’ for website/link inputs; Use inputType: ‘number’ for numeric fields (age, quantity, price).

required

Whether field is required for form submission. Automatically shows asterisk indicator. Type: boolean. Default: false. Visual Impact: Adds red asterisk (*) to 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: ‘number’). Type: number.

max

Maximum value for number inputs (only used when inputType: ‘number’). Type: number.

step

Increment step for number inputs (only used when inputType: ‘number’). Type: number. Recommendations: Use step: 1 for whole numbers (age, quantity); Use step: 0.01 for currency (price, amount); Use step: 5 or 10 for larger increments.

width

CSS width of the input field container. Use for controlling field width in layouts. Type: string. Recommendations: Use ‘100%’ for full-width fields in single-column layouts; Use ‘300px’ for short fields like ZIP codes or phone numbers; Use ‘50%’ when placing fields side-by-side in Grid/Flex.

pattern

Regular expression pattern for HTML5 validation. Use for custom validation rules. Type: string. Recommendations: Use ‘[0-9]{5}’ for US ZIP codes; Use ‘[A-Z]{2}[0-9]{6}’ for country-specific formats; Use ‘^[a-zA-Z0-9]+$’ for alphanumeric‑only fields.

maxLength

Maximum number of characters allowed in the input field. Type: number. Recommendations: Use 50‑100 for names and titles; Use 255‑500 for short descriptions; Match database column VARCHAR limits.

customCss

Custom CSS styles for advanced styling. Parsed as CSS property‑value pairs. Type: string. Security Note: Parsed by cssParser utility. Tenants only affect their own pages (multi‑tenant isolation enforced).

focusEffect

Focus animation effect when user clicks/tabs into the input field. Type: string. Options: none, glow, underline, outline, scale. Default: glow. Visual Impact: none – No focus animation - standard browser focus outline; glow – Soft shadow glow using primary color (--theme-primary) - modern, polished feel; underline – Animated underline that highlights from bottom - minimal, elegant; outline – Solid 2px outline offset from input - high contrast, accessible; scale – Subtle 1% scale up on focus - playful, interactive. Recommendations: Use ‘glow’ for most forms - professional and modern; Use ‘underline’ for minimal/clean design systems; Use ‘outline’ for high‑contrast/accessibility‑first designs; Use ‘scale’ for playful/creative applications; Use ‘none’ for enterprise apps where focus animation may be distracting.

validationShake

Whether to shake the input horizontally when validation fails. Provides immediate visual feedback for errors. Type: boolean. Default: true. Visual Impact: true – Input shakes horizontally 3 times when validation fails - clear error feedback; false – No shake animation - validation errors shown via border color and error text only. Recommendations: Keep enabled (true) for clear validation feedback; Disable (false) for enterprise apps where animation may feel unprofessional; Keep enabled - shake provides additional visual cue beyond color alone.

dataBinding

Data binding configuration to connect input to page data source field. Enables auto‑population and save functionality. CRITICAL for EDIT/DETAIL/CREATE pages to populate inputs with row data. Type: object. Recommendations: ALWAYS use dataBinding on EDIT/DETAIL pages so inputs populate with data from clicked row; ALWAYS use dataBinding on CREATE pages too! Without dataBinding, inputs won’t update page data source and save will fail!; Must configure root.props.pageDataSources first with matching sourceId and id. Sub‑properties:

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

Best Practices

• 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, ‘tel’ for phones, ‘number’ for numbers, ‘url’ for URLs

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