Email

An input field for entering a single email address.

Default
Email Address
Helper text 0 / 255
States
Email Address
Helper text
Default Empty field, waiting for user interaction. Placeholder is visible.
Email Address
Helper text
Hover Hover state indicates interactivity when the cursor is on the input field by changing the border color.
Email Address
Helper text
Active/Focus Active state: Occurs during the moment an element is being activated by the user's input. Focus state: Indicates that an element is currently selected to receive user input, whether from a keyboard, mouse, or voice.
Email Address
Helper text
Disabled Field is inactive and cannot be focused or edited. Use when the field is not applicable to the user.
Email Address
Helper text
Filled Field contains user input. Placeholder is replaced by entered value.
Email Address
Helper text
Typing User is actively entering text. Cursor is visible and input updates in real time.
Email Address
Helper text
Read only Field content is visible but not editable. No cursor interaction.
Email Address
Input is valid
Valid Shown only after a failed form submission, on fields that already pass validation. Highlights correct inputs alongside errors on other fields. Does not show before submit or while the user is typing.
Email Address
This field is required
Error Triggered when validation fails. (On form submit)
Email Address
Please enter a valid email address
Error — Invalid format Triggered when the entered value fails email format validation. (On form submit)
Email Address
Maximum character limit reached
Max Length Maximum character limit (255) reached. Additional input is restricted and a helper message appears.
Behaviour
Valid email format
  • User is required to enter a valid email address with exactly one "@" symbol.
  • The domain uses ASCII hostname rules: letters, digits, and hyphens in each label (hyphens not at the start or end of a label), labels separated by dots, and a final segment of at least two letters.
Specs
1
Label
  • Describes the purpose of the input field.
  • Recommended max 100 char
2
Input text
  • The main area where users type in their data.
  • Max 255 char
3
Helper text (Optional)
  • Provides additional guidance or contextual information.
  • Keep copy short. Read usage guidelines.
  • Recommended max 30 char (include spaces).
4
Field icon (Optional)
  • 20x20, SVG
  • Positioned on the right side of the field
  • When the field enters error or success validation, the decorative icon is replaced by the status icon in the same right-side slot
1 Email Address
2 4
3 Helper text
Dos and Don'ts
  1. Do not use input fields without proper labels as using placeholders by themselves can confuse users.
  2. Use placeholder with the email format required. For example, [email protected]