Get started

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

Start developing Start designing

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>