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

Component Auto-Docs

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();

Last updated

Was this helpful?