Get started

Get the tools and building blocks to design and develop consistent and accessible experiences.

Start developing Start designing

Email

How to ask users for an email address.

Guidance

Applying basic validation helps improve the accuracy of user-entered data.

Bilingual error messaging is contained within the javascript for most of these fields. The language shown is determined by the lang value in your opening HTML tag: <html lang="en">

All of these components require gnb-forms-validation-1.0.0.js


Email address

Basic validation for an email address, combined with required validation.

HTML

<!-- Basic email field with validation -->
<div class="gnb-form-input">
	<label for="email-address">Email<span class="required">*</span><span
			class="sr-only">required</span></label>
	<input id="email-address" class="gnb-field-md" name="email-address" autocomplete="email-address"
		type="email" required oninput="validateEmail(this)">
	<div class="gnb-form-validation" id="email-error" style="display: none;">
	</div>
</div>