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.

Method Name	Description
setValue	Set the data/value of the Value property
setDefaultValue	Set the data/value of the Default Value property
setRangeText	Set the minimum and maximum length of the characters in input type component
setSelectionRange	Set the data/value of the Selection Range property
select	Set the Text type of the Input type component
clearValue	Clear the data/value of the Value property
clearDefaultValue	Clear the data/value of the Default Value property
resetDefaultValue	Reset the data/value of the Default Value property
resetValue	Reset the data/value of the Value property
click	Set what happens on Click event on the Input type component