Get started

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

Develop Design

Email

How to ask users for their email address.

Guidance

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

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

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


Email

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

HTML

<!-- Email 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>