Get started

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

Start developing Start designing

Postal code

How to ask for a postal code.

Guidance

A postal code field with basic masking to format and validate postal codes.

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

Postal code

HTML

<!-- Basic postal code field with validation -->
	<div class="gnb-form-input">
		<label for="postal-code">Postal code<span class="required">*</span><span
				class="sr-only">required</span></label>
		<input id="postal-code" class="gnb-postal-code-field" name="postal-code"
			autocomplete="postal-code" type="text" maxlength="7" required placeholder="A1A 1A1"
			oninput="formatPostalCode(this)">
		<div class="gnb-form-validation" id="postal-code-error" style="display: none;">
		</div>
	</div>
</form>

<!-- Don't forget to add gnb-forms-validation-1.0.0.js at the bottom of your page before the closing </body> tag -->