Email Input
The Email Input component in ToolJet allows users to enter and validate email addresses within your app. It provides built-in validation to ensure the input matches a valid email format, helping you collect reliable user data effortlessly.
Properties​
Property | Description | Expected Value |
|---|---|---|
| Label | Text to display as the label for the field. | String (e.g., Email ID). |
| Placeholder | A hint displayed to guide the user on what to enter. | String (e.g., Please enter your email address). |
| Default Value | The default value that the component will hold when the app is loaded. | String (e.g., john@example.com). |
Events​
| Event | Description |
|---|---|
| On change | Triggers when the user types in the input field. |
| On enter pressed | Triggers whenever the user presses the enter key on the keyboard. |
| On focus | Triggers whenever the user clicks inside the input field. |
| On blur | Triggers whenever the user clicks outside the input field. |
info
Check Action Reference docs to get detailed information about all the Actions.
Component Specific Actions (CSA)​
The following actions of the component can be controlled using the component-specific actions (CSA), you can trigger it using an event or use a RunJS query.
Action | Description | RunJS Query |
|---|---|---|
| setText( ) | Sets the value of the Email Input field. | components.emailinput1.setText(text) |
| clear( ) | Clears the input field. | components.emailinput1.clear() |
| setFocus( ) | Sets the focus of the cursor on the input field. | components.emailinput1.setFocus() |
| setBlur( ) | Removes focus from the input field. | components.emailinput1.setBlur() |
| setVisibility( ) | Sets the visibility of the component. | components.emailinput1.setVisibility(false) |
| setLoading( ) | Sets the loading state of the component. | components.emailinput1.setLoading(true) |
| setDisable( ) | Disables the component. | components.emailinput1.setDisable(true) |
Exposed Variables​
| Variable | Description | How To Access |
|---|---|---|
| value | Holds the value entered by the user in the component. | {{components.emailinput1.value}} |
| label | Holds the value of the component's label. | {{components.emailinput1.label}} |
| isValid | Indicates if the input meets validation criteria. | {{components.emailinput1.isValid}} |
| isMandatory | Indicates if the field is required. | {{components.emailinput1.isMandatory}} |
| isLoading | Indicates if the component is loading. | {{components.emailinput1.isLoading}} |
| isVisible | Indicates if the component is visible. | {{components.emailinput1.isVisible}} |
| isDisabled | Indicates if the component is disabled. | {{components.emailinput1.isDisabled}} |
Validation​
The Email Input component checks every value against a built-in email format, in addition to the options below. The built-in check rejects a dot (.) or hyphen (-) at the start or end of either part of the address, so values such as .user@example.com, user.@example.com, user@.example.com, user@-example.com and user@example-.com show a validation error.
Validation Option | Description | Expected Value |
|---|---|---|
| Make this field mandatory | Displays a 'Field cannot be empty' message if no value is entered. The message also appears as soon as the field is emptied with the clear button or the clear() action. Resetting a Form clears the field without showing the message. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Regex | Regular Expression to validate the input. | Regular Expression Pattern (e.g., /^[^\s@]+@[^\s@]+\.[^\s@]+$/ ). |
| Min length | Sets the minimum number of characters allowed. | Integer (e.g., 10 for a minimum of 10 characters). |
| Max length | Sets the maximum number of characters allowed. | Integer (e.g., 10 for a maximum of 10 characters). |
| Custom validation | Specifies a validation error message for specific conditions. | Logical Expression (e.g., {{ !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(components.emailinput1.value) && "Please enter a valid email address" }}). |
To add regex inside Custom Validation, you can use the below format:
Format: {{(<regexPattern>.test(<value>)) ? '' : 'Error message';}}
Example: {{ !/^[^\s@]+@tooljet\.com$/.test(components.emailinput1.value) ? '' : "Please enter a valid tooljet.com email address" }}
Additional Actions​
Action | Description | Configuration Options |
|---|---|---|
| Enable clear button | Shows a clear button inside the field while it has a value. Clicking it clears the value. The button is hidden while the component is disabled or loading. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Loading state | Enables a loading spinner, often used with isLoading to indicate progress. | Enable/disable the toggle button or dynamically configure the value by clicking fx and entering a logical expression. |
| Visibility | Controls component visibility. | Enable/disable the toggle button or dynamically configure the value by clicking fx and entering a logical expression. |
| Collapse when hidden | Collapses the component's space when it is hidden, so surrounding components fill the space. Takes effect when the app runs (preview or released app), not on the editor canvas. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Disable | Enables or disables the component. | Enable/disable the toggle button or dynamically configure the value by clicking fx and entering a logical expression. |
| Tooltip | Provides additional information on hover. Supports Plain text, Markdown, and HTML formats. | String (e.g., Enter the email address ). |
Devices​
Property | Description | Expected Value |
|---|---|---|
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking fx and entering a logical expression. |
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking fx and entering a logical expression. |
Styles​
Label​
Label Property | Description | Configuration Options |
|---|---|---|
| Text | Sets the color of the component's label. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Size | Sets the font size of the label, in pixels. Defaults to 12. | Enter a number or click on fx and enter code that returns a number. |
| Alignment | Sets the position of the label and input field. | Select either side or top or click on fx to input code that programmatically returns an alignment value - side or top. |
| Direction | When alignment is set to side, places the label to the left or right of the field. | Select Left or Right using the icon toggles. |
| Width | Sets the width of the input field. | Enable Auto width to use the standard width automatically. Disable it to manually adjust the width using the slider or by entering a numeric value via fx. You can also choose whether the width is calculated relative to the Container or relative to the Field. |
Field​
Field Property | Description | Configuration Options |
|---|---|---|
| Background | Sets the background color of the component. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Border | Sets the border color of the component. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Accent | Sets the border color of the field while it is focused. A validation error border takes priority. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Text | Sets the text color of the text entered in the component. | Select the color or click on fx and input code that programmatically returns a hex color code. |
| Error text | Sets the text color of the validation message that is displayed. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Icon | Allows you to select an icon for the component. A mail icon is shown by default. | Turn the icon visibility on or off, and select the icon and icon color. Alternatively, set it programmatically using fx. |
| Border radius | Modifies the border radius of the component. | Enter a number or click on fx and enter a code that programmatically returns a numeric value. |
| Box shadow | Sets the box shadow properties of the component. | Select the box shadow color and adjust the related properties or set it programmatically using fx. |
Container​
Padding
Allows you to maintain a standard padding by enabling the Default option.
Advanced​
Property | Description | Configuration Options |
|---|---|---|
| CSS class | Adds a custom CSS class to the component, which can be targeted using Custom Styles for advanced styling. | Enter one or more class names. |
info
The Advanced section is available only if your plan has the Custom Styles feature enabled.
Deprecated styles​
Property | Description | Configuration Options |
|---|---|---|
| Legacy input size | Keeps the canvas sizing that input components used before this setting was added. When on, a top-aligned label always adds height to the component, even when the label is empty, and the component's height doesn't change when the label alignment is set with fx. When off, a top-aligned label adds height only when the label has text. | Enable/disable the toggle button. Off for new components. Turned on for components that existed before this setting was added, including components in imported apps. |