Vehicle Identification Number (VIN)

Guidance

When we ask users for their Vehicle Identification Number (VIN), we want to tell them up front where to find it. For users that need more help, we provide more information in a field label modal.

Vehicle Identification Number (VIN)

<!-- Field with tooltip label -->
<label for="vehicle-identification-number"><a tabindex="0" data-target="modal-address" aria-haspopup="dialog"
	aria-controls="modal-address" class="modal-button info">Vehicle Identification Number (VIN)</a></label>
<div class="gnb-form-helper-text">
Your Vehicle Identification Number (VIN) is 7 digits long and can be found on the front of your card.
</div>
<input type="text" name="vehicle-identification-number" id="vehicle-identification-number" />

<!-- Field info modal dialog - place this OUTSIDE any <form> element in your page -->
<div class="gnb-modal" id="modal-address" role="dialog" aria-modal="true"
aria-labelledby="modal-title-address" aria-describedby="modal-description-address">
<dialog>
	<button class="gnb-btn-close close-modal-button" data-target="modal-address"><span
			class="sr-only">Close modal window</span><i class="fa-solid fa-xmark"></i></button>
	<div class="gnb-modal-header">
		<h2 id="modal-title-address">Vehicle Identification Number (VIN)</h2>
	</div>
	<div class="gnb-modal-body" id="modal-description-address">
		<p>
			Your Vehicle Identification Number (VIN) is 17 digits and can be found on the front of your card.
		</p>
	</div>
</dialog>
</div>

<!-- Add this at the bottom of your page before the closing body tag -->
<script src="gnb-modals-1.0.0.js"></script>

Partial Vehicle Identification Number (VIN)

<label for="vehicle-identification-number">
	<a tabindex="0" data-target="modal-vin-partial" aria-haspopup="dialog" aria-controls="modal-vin-partial" class="modal-button info">
		First 6 digits of your Vehicle Identification Number (VIN)
	</a>
</label>
<div class="gnb-form-helper-text">
	Your VIN can be found on your vehicle registration.
</div>
<input type="text" name="vehicle-identification-number" id="vehicle-identification-number"
	class="gnb-field-sm" maxlength="6" />

<!-- Field info modal dialog - place this OUTSIDE any <form> element in your page -->
<div class="gnb-modal" id="modal-vin-partial" role="dialog" aria-modal="true"
	aria-labelledby="modal-title-vin-partial" aria-describedby="modal-description-vin-partial">
	<dialog>
		<button class="gnb-btn-close close-modal-button" data-target="modal-vin-partial"><span
				class="sr-only">Close modal window</span><i class="fa-solid fa-xmark"></i></button>
		<div class="gnb-modal-header">
			<h2 id="modal-title-vin-partial">Vehicle Identification Number (VIN)</h2>
		</div>
		<div class="gnb-modal-body" id="modal-description-vin-partial">
			<p>
				Your Vehicle Identification Number (VIN) is 17 digits and can be found on your vehicle registration.
			</p>
		</div>
	</dialog>
</div>

<!-- Add this at the bottom of your page before the closing body tag -->
<script src="gnb-modals-1.0.0.js"></script>