Get started

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

Develop Design

Phone number

How to ask users for their phone number.

Guidance

A phone number field with basic masking to format and validate phone numbers.

You'll need to include gnb-forms-validation-1.0.0.js to use this component.

Phone number

HTML

<!-- Phone number with masking and validation -->
<div class="gnb-form-input">
	<label for="phone-number">Phone <span class="required">*</span><span
			class="sr-only">required</span></label>
	<input type="tel" id="phone-number" name="phone" aria-describedby="phone-error"
		placeholder="506-555-5555" onblur="validatePhoneNumber(this)">
	<div class="gnb-form-validation" id="phone-error" style="display: none;">
	</div>
</div>