Input

Add an input element to your web app to easily gather various types of user input. The input element supports multiple data types including text, numbers, dates, and advanced currency formatting with customizable symbols and separators.

Getting started

Using AI

The quickest way to set up an input is by using AI:

1. Ask AI to add the input element and specify the type you need
2. Mention any specific formatting requirements (currency symbols, validation rules, etc.)
3. Continue refining by asking for modifications like "Make this a currency input with dollar symbol"

Manual setup

To set up an input manually:

1. Add the Input element to your page from the Add panel
2. Choose your input type from the dropdown menu
3. Configure the initial value and placeholder text
4. Set up validation rules if using in a form context
5. Customize styling and behavior options

Input types

When setting up an input element, you can choose from several input types depending on what kind of data you're collecting:

• Short Answer: Perfect for brief text entries like names or titles
• Long Answer: Ideal for more detailed responses and multi-line text
• Email: Specifically designed for email addresses with built-in validation
• Search: Adds a 'search' tag to the HTML, however, the functionally is identical to Short Answer.
• Password: Secure password entries with optional visibility toggle
• Number: Whole numbers with configurable min/max values and step increments
• Decimal: Decimal numbers with precision control and formatting
• Date: Date selection with min/max date constraints
• Time: Time inputs with configurable precision (hours, minutes, seconds)
• Phone: Phone number inputs with appropriate keyboard on mobile
• Color: Color picker for selecting colors
• Currency: Monetary values with advanced formatting options

Common configuration options

Beyond the input type, you can configure several options:

• Initial Value: Set a default value that appears when the page loads
• Placeholder: Add hint text to guide users on what to enter
• Read Only: Make the input non-editable (useful for display-only fields)
• Required: Make the input mandatory for form submission
• Debounce: Add input delay to improve performance with workflows
• Autocomplete: Enable browser suggestions as users type

Currency input configuration

When you select the currency input type, you get access to powerful formatting options that make handling monetary values much easier. The currency input automatically formats numbers as you type, adding thousands separators and maintaining the correct decimal places while storing the actual numeric value separately from what's displayed.

Currency symbol options

• Show currency symbol: Toggle symbol visibility on/off
• Currency symbol: Choose your symbol ($, €, £, ¥, etc.)
• Symbol position: Place before (prefix) or after (suffix) the value
• Symbol styling: Customize color, font size, and padding

Number formatting options

• Decimal places: Set how many decimal places to show (0-10)
• Thousands separator: Choose comma, period, space, apostrophe, or none
• Decimal separator: Select period or comma for decimal separation

TIP

The currency input automatically formats numbers as you type, adding thousands separators and maintaining the correct decimal places. The actual numeric value is stored separately from the formatted display value.

WARNING

Make sure your thousands separator and decimal separator are different. Using the same character for both will cause formatting conflicts.

Common currency formats

Here are some popular currency formatting configurations:

• US Dollar: $1,234.56 - Dollar symbol prefix, comma thousands separator, period decimal separator, 2 decimal places
• European Euro: 1.234,56€ - Euro symbol suffix, period thousands separator, comma decimal separator, 2 decimal places
• Japanese Yen: ¥1,235 - Yen symbol prefix, comma thousands separator, no decimal places

Form integration

The input element works seamlessly with WeWeb's form system:

• Field name: Set a unique identifier for form submission
• Custom validation: Enable advanced validation rules beyond basic required/optional
• Validation formula: Write custom validation logic for complex business rules
• Required field: Mark the input as mandatory with automatic validation feedback

When used in a form, the input automatically handles validation states and provides feedback to users.

Example use cases

Basic contact form input

For collecting names, messages, or other text data:

• Choose Short Answer as the input type
• Add a helpful placeholder like "Enter your full name"
• Enable Required if mandatory
• Set up form validation as needed

Currency amount input

For pricing, financial data, or monetary values:

• Select Currency as the input type
• Configure currency symbol and formatting preferences
• Set appropriate decimal places for your use case
• Add min/max validation for business rules

Email validation input

For email collection with built-in validation:

• Choose Email as the input type
• Add placeholder like "Enter your email address"
• Browser automatically validates email format
• Enable Required and add to form for complete validation

Decimal precision input

For measurements, scientific data, or precise numbers:

• Select Decimal as the input type
• Set precision level for decimal places needed
• Configure min/max values if appropriate
• Set step value for increment controls

Search functionality

For filtering or finding content:

• Choose Search as the input type
• Add debouncing to improve performance
• Connect to workflows that filter data
• Style with appropriate search iconography

Best practices

Do:

• Use appropriate input types for better UX and validation
• Add helpful placeholder text to guide users
• Enable debouncing for inputs that trigger workflows or API calls
• Use currency formatting for all monetary values
• Set up proper validation

Don't:

• Use generic text inputs when specific types are available
• Set conflicting thousands and decimal separators for currency inputs
• Forget to handle validation states in your app logic
• Use currency inputs for non-monetary numeric values

Forking

While the Input element offers extensive built-in customization options, there may be cases where you need functionality beyond what's natively available. In these situations, you can fork the element and modify it to meet your specific requirements.

If you are unsure how to fork an element, you can learn more in the dedicated documentation.

Forking example: Password strength indicator

One reason to fork the Input would be to add a visual password strength indicator:

Fork the password input element to add a real-time password strength meter that displays a color-coded bar (red/yellow/green) and strength text (Weak/Medium/Strong) below the input, evaluating criteria like length, special characters, numbers, and mixed case as the user types.

This would provide immediate visual feedback to help users create stronger passwords while maintaining all the existing secure input functionality.

Settings

Property	Options/Type	Description
Input Type	Select	Choose the type of input (text, email, currency, etc.)
Initial Value	Text/Number	Default value displayed when the page loads
Placeholder	Text	Hint text shown when input is empty
Read Only	Boolean	Makes the input non-editable
Required	Boolean	Makes the input mandatory for form submission
Debounce	Boolean	Enables input delay for performance optimization
Debounce Delay	Length	Time delay for debounced inputs (in milliseconds)
Autocomplete	Boolean	Enables browser autocomplete suggestions

Currency-specific settings

Property	Options/Type	Description
Show Currency Symbol	Boolean	Whether to display the currency symbol
Currency Symbol	Text	The symbol to display ($, €, £, etc.)
Symbol Position	Select	Before (prefix) or after (suffix) the value
Decimal Places	Number	Number of decimal places to show (0-10)
Thousands Separator	Select	Character for thousands separation
Decimal Separator	Select	Character for decimal separation
Symbol Color	Color	Color of the currency symbol
Symbol Font Size	Length	Font size of the currency symbol
Symbol Padding	Length	Spacing around the currency symbol

Number-specific settings

Property	Options/Type	Description
Min Number	Number	Minimum allowed value
Max Number	Number	Maximum allowed value
Step	Number	Increment value for number controls
Hide Arrows	Boolean	Hide increment/decrement arrows
Precision	Select	Decimal precision for decimal inputs

Date/Time settings

Property	Options/Type	Description
Min Date	Text	Earliest selectable date (yyyy-mm-dd format)
Max Date	Text	Latest selectable date (yyyy-mm-dd format)
Time Precision	Select	Precision for time inputs (hours, minutes, seconds)

Textarea settings

Property	Options/Type	Description
Rows	Number	Number of visible text rows
Resize	Boolean	Allow manual resizing of textarea

Event triggers

Event	Description	Payload
On change	Triggered when input value changes	{ value: string/number, domEvent: Event }
On init value change	Triggered when initial value changes	{ value: string/number }
On enter key	Triggered when Enter key is pressed	{ value: string/number }
On focus	Triggered when input gains focus	null
On blur	Triggered when input loses focus	null

Example event payloads

On change (text input)

{
  "value": "Hello World",
  "domEvent": Event
}

On change (currency input)

{
  "value": 1234.56,
  "domEvent": Event
}

On enter key

{
  "value": "submitted text"
}

Exposed variables

Variable	Type	Description
value	String/Number	The current input value
formatted value	String	The formatted display value (currency inputs only)

Component actions

Action	Description	Parameters
Focus element	Programmatically focus the input	None