Input Field Types

In Lowcoder, Input Type components are essential for capturing user data, offering a range of options to suit different data entry needs. The primary input components include:

1. Input: A single-line text field for general text input. It's versatile and commonly used for short text entries such as names or titles.

2. Input Number: Specifically designed for numerical data, this component ensures that only valid numbers are entered, facilitating operations like calculations or data analysis.

3. Password: Similar to the standard Input component but masks the entered characters, enhancing security for sensitive information like passwords.

4. Text Area: A multi-line text field suitable for longer text inputs, such as comments or descriptions, providing users with ample space for detailed information.

Common Features:

• Customisation: Each component offers properties for customisation, including placeholder text, default values, and styling options, allowing for a tailored user experience.

• Event Handlers: They support various event handlers like 'Change', 'Focus', and 'Blur', enabling the execution of specific actions in response to user interactions.

• Validation: Input validation rules can be applied to ensure data integrity and provide immediate feedback to users regarding their input.

By effectively utilising these Input Type components, developers can create intuitive and user-friendly forms that cater to a wide array of data entry requirements.

Component Playground

• Input Component

• Password Component

• Number Input

• Text Area Component

Component Auto-Docs

• Input Component
• Password Component
• Number Input
• Text Area Component

Properties of the Input Type components

These properties are accessible in {{ }} notations, as well as in JavaScript Queries.

Property Name	Type	Description
value	String	Returns the value of the Input type component
disabled	Boolean	Returns True or False based on whether the Input type component is disabled or not
hidden	Boolean	Returns True or False based on whether the Input type component is hidden or not
invalid	Boolean	Returns True or False based on whether the Input type component is invalid or not
required	Boolean	Returns True or False based on whether the Input type component is required or not
placeholder	String	Returns the placeholder value of the Input type component

Events

Events give you the ability to trigger further actions (with Event-Handlers).

Event Name	Description
Change	When a User "changes" anything on the Input component.
Focus	When a User "clicks" on the input field typing area
Blur	When a User "clicks" outside of the input field component i.e, defocuses the input component.
Submit	When a User press "enters" inside the input field component.

Methods

You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.

setValue() :

input1.setValue() method sets the Input's Value property, which gets shown in the Input component.

input1.setValue("John Nick");

clearValue() :

input1.clearValue() clears the Input's Value property and empties the value from the Input component.

input1.clearValue();

resetValue() :

input1.resetValue() method resets the Input's value property to the default value of the Input component.

input1.resetValue();

setDefaultValue() :

input1.setDefaultValue() method sets the Input's Default value, which gets shown in the Input component as default.

input1.setDefaultValue("John Nick");

clearDefaultValue() :

input1.clearDefaultValue() clears the Input's Default value and empties the value from the Input component.

input1.clearDefaultValue();

resetDefaultValue() :

input1.resetDefaultValue() method resets the Input's Default value to the default value of the Input component.

input1.resetDefaultValue();

setRangeText() :

input1.setRangeText() method sets the minimum and maximum value of the inout component. Value of the Input component should lie between the minimum and maximum limits.

input1.setRangeText(3,6);

setSelectionRange() :

input1.setSelectionRange() sets the Selection Range of the Input component.

input1.setSelectionRange();

click() :

input1.click() method sets what happens when User clicks on the Input component.

input1.click();

select() :

input1.select() method selects the text type of the Input component.

input1.select();