> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/input-email.md).

# 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](/dynamic-components/core-concepts/component-visibility.md).

## Interactions

[Interactions](/dynamic-components/component-builder/interactions.md) 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/input-email.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.