Input Email
The Avonni Email Input component lets users enter and validate one or multiple email addresses. Use it in forms where you need to capture, constrain, and validate email values before submitting data.
Overview
The Email Input component renders a labelled text field that enforces email format. It supports single or multiple addresses, length limits, custom error messages, and read-only or disabled states — everything you need to build a reliable email capture field in your page.
Configuration
To configure the Email Input, select it on the canvas. The configuration panel opens on the right. The sections below mirror the properties from top to bottom.
Properties
Label
The text label displayed above the input field.
Value
The pre-filled value shown in the field when the page loads. Can be bound to a Salesforce field or flow variable.
Field Level Help
Help text detailing the purpose and function of the input. Appears as a tooltip icon next to the label.
Variant
Controls how the label is displayed relative to the input field. Options:
Standard (default) — label appears above the field.
Label Hidden — label is hidden from view.
Label Inline — label appears to the left of the field on the same line.
Label Stacked — label starts above the field and animates upward on focus.
Placeholder
Text displayed inside the empty field to prompt the user for a valid entry.
Autocomplete
When enabled, the browser's autocomplete behaviour is active for this field.
Maximum Length
The maximum number of characters allowed in the field.
Message When Too Long
Error message shown when the entered value exceeds the maximum length. Requires Maximum Length to be set.
Minimum Length
The minimum number of characters required in the field.
Message When Too Short
Error message shown when the entered value is shorter than the minimum length. Requires Minimum Length to be set.
Pattern
A regular expression that the input's value must match for validation to pass.
Message When Pattern Mismatch
Error message shown when the value does not match the required pattern. Requires Pattern to be set.
Message When Type Mismatch
Error message shown when the value is not a valid email address format.
Required
When enabled, the field must be filled out before the form can be submitted.
Message When Value Missing
Error message shown when the field is left empty and is marked as required. Requires Required to be enabled.
Multiple
When enabled, the user can enter more than one email address (comma-separated).
Disabled
When enabled, the field is disabled and users cannot interact with it.
Read Only
When enabled, the field displays its value but cannot be edited. Available under Advanced Options.
Message When Bad Input
Error message shown when the field contains invalid input that cannot be parsed. Available under Advanced Options.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Interactions
Interactions define what happens when users interact with the Email Input. Configure them from the Interactions tab of the Edit Email Input panel.
Change
Fires when the value in the field changes. Use this to update a flow variable, filter other components, or drive conditional logic based on the entered email address.
Styling
Configure the Email Input's appearance from the Style tab of the Edit Email Input panel.
Controls the outer spacing around the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the component's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Controls the component's dimensions.
Width / Height: Set fixed dimensions.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Overflow: Control how content that exceeds the bounds is handled.
Customizes the border surrounding the component.
Color / Size / Style / Radius: Set the border color, thickness, style, and corner rounding.
Styles the field label.
Text Color / Font Size / Font Style / Font Weight: Set the label color and typography.
Styles the input field.
Background Color / Text Color / Border Color / Border Radius: Set the input colors and corner rounding.
Spacing Horizontal Start / Spacing Horizontal End: Set the inner horizontal spacing.
Last updated
Was this helpful?