Email Field

The label is used to identify the input field. It supports plain-text content, and its length is limited to the width of the field. Helpers and Tooltips can be used to provide additional information that doesn’t fit into the label.

Visible labels are strongly recommended for all input fields. In cases where the built-in label cannot be used, an external element can be associated as the field’s label through the aria-labelledby attribute. Fields without any visible label should be provided an invisible label for assistive technologies through the aria-label attribute.

Helpers are used to provide additional information that the user may need to fill in the field, such as format requirements or explanations of the field’s purpose, below the field.

A style variant is available for rendering the helper above the field.

In addition to plain-text, helpers can contain components and other HTML elements. However, complex and interactive content are likely to have accessibility issues.

The placeholder is a text that is displayed when the field is empty. Its primary purpose is to provide a short input hint, such as the expected format, in cases where a Helper cannot be used.

Placeholders should not be used as a replacement for a visible label. See Label for alternatives to the built-in field label. Be aware that placeholders can be mistaken for a filled-in value.

Tooltips are small text pop-ups displayed on hover and on keyboard-focus. They can be used to provide additional information about a field. This can be useful in situations where an always-visible Helper is not appropriate. Helpers are generally recommended in favor of tooltips, as they provide much better discoverability and mobile support. See the Tooltip documentation for more information.

The optional clear button, displayed when the field is not empty, clears the field’s current value. Clear buttons can be especially useful in search and filter fields, where users often need to clear the value, but less so in regular forms.

Prefix and suffix elements — rendered at either end of the field — can be used to display units, icons, and similar visual cues to the field’s purpose or format.

Prefix and suffix elements typically don’t work well with assistive technologies like screen readers. Therefore, the information conveyed by them should also be conveyed through other means, such as in the Label, a Helper or through ARIA attributes on the field itself.

Required fields are marked with an indicator next to the label, and become invalid if left empty after having been focused. An error message explaining that the field is required needs to be provided manually.

An instruction text at the top of the form explaining the required indicator is recommended. The indicator itself can be customized through the --lumo-required-field-indicator style property.

The pattern attribute is an additional validation criterion that you can set if, for example, a specific domain is required. The pattern is specified using a regular expression.

The example below uses the pattern .+@example\.com and only accepts addresses in the example.com domain.

Three different text alignments are supported: left (default), center, and right.

Right-alignment is recommended for numerical values when presented in vertical groups, as it aids interpretation and comparison of values.

The small variant can be used to make individual fields more compact. The default size of fields can be customized through style properties.

The helper can be rendered above the field, below the label.