<div class="text-input text-input--is-focused">
    <div class="text-input__pre">
        <label class="text-input__label" for="phone-number">Phone Number</label>
    </div>
    <div class="text-input__inner">
        <div class="text-input__country-select btn-secondary">
            <span class="text-input__country-indicator">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
				<rect width="24" height="24" fill="black" fill-opacity="0"/>
				<rect width="24" height="24" />
				<rect width="20" height="15" fill="black" fill-opacity="0" transform="translate(2 4)"/>
				<rect width="20" height="15" fill="black" fill-opacity="0" transform="translate(2 4)"/>
				<rect width="20" height="15" fill="black" fill-opacity="0" transform="translate(2 4)"/>
				<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4H22V5.15385H2V4ZM2 6.30769H22V7.46154H2V6.30769ZM2 8.61538H22V9.76923H2V8.61538ZM2 10.9231H22V12.0769H2V10.9231ZM2 13.2308H22V14.3846H2V13.2308ZM2 15.5385H22V16.6923H2V15.5385ZM2 17.8462H22V19H2V17.8462Z" fill="#BD3D44"/>
				<path fill-rule="evenodd" clip-rule="evenodd" d="M2 5.15381H22V6.30765H2V5.15381ZM2 7.4615H22V8.61535H2V7.4615ZM2 9.76919H22V10.923H2V9.76919ZM2 12.0769H22V13.2307H2V12.0769ZM2 14.3846H22V15.5384H2V14.3846ZM2 16.6923H22V17.8461H2V16.6923Z" fill="white"/>
				<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4H9.99992V12.0768H2V4Z" fill="#192F5D"/>
				<rect width="7.28338" height="7.29728" fill="black" fill-opacity="0" transform="translate(2.35828 4.3457)"/>
				<path fill-rule="evenodd" clip-rule="evenodd" d="M2.66662 4.3457L2.7394 4.66492H2.97496L2.78438 4.86223L2.85718 5.18145L2.6666 4.98416L2.47606 5.18145L2.54884 4.86223L2.35828 4.66492H2.59382L2.66662 4.3457ZM3.99993 4.3457L4.07273 4.66492H4.3083L4.11772 4.86223L4.19052 5.18145L3.99993 4.98416L3.80939 5.18145L3.88217 4.86223L3.69161 4.66492H3.92715L3.99993 4.3457ZM5.33331 4.3457L5.40609 4.66492H5.64165L5.45107 4.86223L5.52387 5.18145L5.33331 4.98416L5.14275 5.18145L5.21553 4.86223L5.02496 4.66492H5.26053L5.33331 4.3457ZM6.6666 4.3457L6.73938 4.66492H6.97492L6.78436 4.86223L6.85714 5.18145L6.6666 4.98416L6.47602 5.18145L6.54882 4.86223L6.35824 4.66492H6.5938L6.6666 4.3457ZM7.99995 4.3457L8.07273 4.66492H8.3083L8.11772 4.86223L8.19051 5.18145L7.99993 4.98416L7.80939 5.18145L7.88217 4.86223L7.69161 4.66492H7.92715L7.99995 4.3457ZM9.33331 4.3457L9.40609 4.66492H9.64165L9.45107 4.86223L9.52387 5.18145L9.33331 4.98416L9.14273 5.18145L9.21555 4.86223L9.02496 4.66492H9.26053L9.33331 4.3457ZM3.33331 5.15341L3.40609 5.47263H3.64165L3.45107 5.66991L3.52389 5.98915L3.33331 5.79187L3.14275 5.98915L3.21552 5.66991L3.02496 5.47263H3.26053L3.33331 5.15341ZM4.6666 5.15341L4.73938 5.47263H4.97492L4.78436 5.66991L4.85714 5.98915L4.6666 5.79187L4.47602 5.98915L4.54882 5.66991L4.35824 5.47263H4.5938L4.6666 5.15341ZM5.99995 5.15341L6.07273 5.47263H6.3083L6.11772 5.66991L6.19051 5.98915L5.99993 5.79187L5.80939 5.98915L5.88217 5.66991L5.69161 5.47263H5.92715L5.99995 5.15341ZM7.33331 5.15341L7.40609 5.47263H7.64165L7.45107 5.66991L7.52387 5.98915L7.33331 5.79187L7.14273 5.98915L7.21557 5.66991L7.02498 5.47263H7.26055L7.33331 5.15341ZM8.6666 5.15341L8.73938 5.47263H8.97492L8.78436 5.66991L8.85714 5.98915L8.6666 5.79187L8.47602 5.98915L8.54882 5.66991L8.35824 5.47263H8.5938L8.6666 5.15341ZM2.66662 5.96109L2.7394 6.2803H2.97496L2.78438 6.47762L2.85718 6.79683L2.6666 6.59955L2.47606 6.79683L2.54884 6.47762L2.35828 6.2803H2.59382L2.66662 5.96109ZM3.99993 5.96109L4.07273 6.2803H4.3083L4.11772 6.47762L4.19052 6.79683L3.99993 6.59955L3.80939 6.79683L3.88217 6.47762L3.69161 6.2803H3.92715L3.99993 5.96109ZM5.33331 5.96109L5.40609 6.2803H5.64165L5.45107 6.47762L5.52387 6.79683L5.33331 6.59955L5.14275 6.79683L5.21553 6.47762L5.02496 6.2803H5.26053L5.33331 5.96109ZM6.6666 5.96109L6.73938 6.2803H6.97492L6.78436 6.47762L6.85714 6.79683L6.6666 6.59955L6.47602 6.79683L6.54882 6.47762L6.35824 6.2803H6.5938L6.6666 5.96109ZM7.99995 5.96109L8.07273 6.2803H8.3083L8.11772 6.47762L8.19051 6.79683L7.99993 6.59955L7.80939 6.79683L7.88217 6.47762L7.69161 6.2803H7.92715L7.99995 5.96109ZM9.33331 5.96109L9.40609 6.2803H9.64165L9.45107 6.47762L9.52387 6.79683L9.33331 6.59955L9.14273 6.79683L9.21555 6.47762L9.02496 6.2803H9.26053L9.33331 5.96109ZM3.33331 6.76877L3.40609 7.08801H3.64165L3.45107 7.28529L3.52389 7.60454L3.33331 7.40726L3.14275 7.60454L3.21552 7.28529L3.02496 7.08801H3.26053L3.33331 6.76877ZM4.6666 6.76877L4.73938 7.08801H4.97492L4.78436 7.28529L4.85714 7.60454L4.6666 7.40726L4.47602 7.60454L4.54882 7.28529L4.35824 7.08801H4.5938L4.6666 6.76877ZM5.99995 6.76877L6.07273 7.08801H6.3083L6.11772 7.28529L6.19051 7.60454L5.99993 7.40726L5.80939 7.60454L5.88217 7.28529L5.69161 7.08801H5.92715L5.99995 6.76877ZM7.33331 6.76877L7.40609 7.08801H7.64165L7.45107 7.28529L7.52387 7.60454L7.33331 7.40726L7.14273 7.60454L7.21555 7.28529L7.02496 7.08801H7.26053L7.33331 6.76877ZM8.6666 6.76877L8.73938 7.08801H8.97492L8.78436 7.28529L8.85714 7.60454L8.6666 7.40726L8.47602 7.60454L8.54882 7.28529L8.35824 7.08801H8.5938L8.6666 6.76877ZM2.66662 7.57647L2.7394 7.89569H2.97496L2.78438 8.093L2.85718 8.41222L2.6666 8.21493L2.47606 8.41222L2.54884 8.093L2.35828 7.89569H2.59382L2.66662 7.57647ZM3.99993 7.57647L4.07273 7.89569H4.3083L4.11772 8.093L4.19052 8.41222L3.99993 8.21493L3.80939 8.41222L3.88217 8.093L3.69161 7.89569H3.92715L3.99993 7.57647ZM5.33331 7.57647L5.40609 7.89569H5.64165L5.45107 8.093L5.52387 8.41222L5.33331 8.21493L5.14275 8.41222L5.21553 8.093L5.02496 7.89569H5.26053L5.33331 7.57647ZM6.6666 7.57647L6.73938 7.89569H6.97492L6.78436 8.093L6.85714 8.41222L6.6666 8.21493L6.47602 8.41222L6.54882 8.093L6.35824 7.89569H6.5938L6.6666 7.57647ZM7.99995 7.57647L8.07273 7.89569H8.3083L8.11772 8.093L8.19051 8.41222L7.99993 8.21493L7.80939 8.41222L7.88217 8.093L7.69161 7.89569H7.92715L7.99995 7.57647ZM9.33331 7.57647L9.40609 7.89569H9.64165L9.45107 8.093L9.52387 8.41222L9.33331 8.21493L9.14273 8.41222L9.21555 8.093L9.02496 7.89569H9.26053L9.33331 7.57647ZM3.33331 8.38415L3.40609 8.7034H3.64165L3.45107 8.90068L3.52389 9.21992L3.33331 9.02264L3.14275 9.21992L3.21552 8.90068L3.02496 8.7034H3.26053L3.33331 8.38415ZM4.6666 8.38415L4.73938 8.7034H4.97492L4.78436 8.90068L4.85714 9.21992L4.6666 9.02264L4.47602 9.21992L4.54882 8.90068L4.35824 8.7034H4.5938L4.6666 8.38415ZM5.99995 8.38415L6.07273 8.7034H6.3083L6.11772 8.90068L6.19051 9.21992L5.99993 9.02264L5.80939 9.21992L5.88217 8.90068L5.69161 8.7034H5.92715L5.99995 8.38415ZM7.33331 8.38415L7.40609 8.7034H7.64165L7.45107 8.90068L7.52387 9.21992L7.33331 9.02264L7.14273 9.21992L7.21555 8.90068L7.02496 8.7034H7.26053L7.33331 8.38415ZM8.6666 8.38415L8.73938 8.7034H8.97492L8.78436 8.90068L8.85714 9.21992L8.6666 9.02264L8.47602 9.21992L8.54882 8.90068L8.35824 8.7034H8.5938L8.6666 8.38415ZM2.66662 9.19186L2.7394 9.51107H2.97496L2.78438 9.70839L2.85718 10.0276L2.6666 9.83032L2.47606 10.0276L2.54884 9.70839L2.35828 9.51107H2.59382L2.66662 9.19186ZM3.99993 9.19186L4.07273 9.51107H4.3083L4.11772 9.70839L4.19052 10.0276L3.99993 9.83032L3.80939 10.0276L3.88217 9.70839L3.69161 9.51107H3.92715L3.99993 9.19186ZM5.33331 9.19186L5.40609 9.51107H5.64165L5.45107 9.70839L5.52387 10.0276L5.33331 9.83032L5.14275 10.0276L5.21553 9.70839L5.02496 9.51107H5.26053L5.33331 9.19186ZM6.6666 9.19186L6.73938 9.51107H6.97492L6.78436 9.70839L6.85714 10.0276L6.6666 9.83032L6.47602 10.0276L6.54882 9.70839L6.35824 9.51107H6.5938L6.6666 9.19186ZM7.99995 9.19186L8.07273 9.51107H8.3083L8.11772 9.70839L8.19051 10.0276L7.99993 9.83032L7.80939 10.0276L7.88217 9.70839L7.69161 9.51107H7.92715L7.99995 9.19186ZM9.33331 9.19186L9.40609 9.51107H9.64165L9.45107 9.70839L9.52387 10.0276L9.33331 9.83032L9.14273 10.0276L9.21555 9.70839L9.02496 9.51107H9.26053L9.33331 9.19186ZM3.33331 9.99953L3.40609 10.3188H3.64165L3.45107 10.5161L3.52389 10.8353L3.33331 10.638L3.14275 10.8353L3.21552 10.5161L3.02496 10.3188H3.26053L3.33331 9.99953ZM4.6666 9.99953L4.73938 10.3188H4.97492L4.78436 10.5161L4.85714 10.8353L4.6666 10.638L4.47602 10.8353L4.54882 10.5161L4.35824 10.3188H4.5938L4.6666 9.99953ZM5.99995 9.99953L6.07273 10.3188H6.3083L6.11772 10.5161L6.19051 10.8353L5.99993 10.638L5.80939 10.8353L5.88217 10.5161L5.69161 10.3188H5.92715L5.99995 9.99953ZM7.33331 9.99953L7.40609 10.3188H7.64165L7.45107 10.5161L7.52387 10.8353L7.33331 10.638L7.14273 10.8353L7.21555 10.5161L7.02496 10.3188H7.26053L7.33331 9.99953ZM8.6666 9.99953L8.73938 10.3188H8.97492L8.78436 10.5161L8.85714 10.8353L8.6666 10.638L8.47602 10.8353L8.54882 10.5161L8.35824 10.3188H8.5938L8.6666 9.99953ZM2.66662 10.8072L2.7394 11.1265H2.97496L2.78438 11.3238L2.85718 11.643L2.6666 11.4457L2.47606 11.643L2.54884 11.3238L2.35828 11.1265H2.59382L2.66662 10.8072ZM3.99993 10.8072L4.07273 11.1265H4.3083L4.11772 11.3238L4.19052 11.643L3.99993 11.4457L3.80939 11.643L3.88217 11.3238L3.69161 11.1265H3.92715L3.99993 10.8072ZM5.33331 10.8072L5.40609 11.1265H5.64165L5.45107 11.3238L5.52387 11.643L5.33331 11.4457L5.14275 11.643L5.21553 11.3238L5.02496 11.1265H5.26053L5.33331 10.8072ZM6.6666 10.8072L6.73938 11.1265H6.97492L6.78436 11.3238L6.85714 11.643L6.6666 11.4457L6.47602 11.643L6.54882 11.3238L6.35824 11.1265H6.5938L6.6666 10.8072ZM7.99995 10.8072L8.07273 11.1265H8.3083L8.11772 11.3238L8.19051 11.643L7.99993 11.4457L7.80939 11.643L7.88217 11.3238L7.69161 11.1265H7.92715L7.99995 10.8072ZM9.33331 10.8072L9.40609 11.1265H9.64165L9.45107 11.3238L9.52387 11.643L9.33331 11.4457L9.14273 11.643L9.21555 11.3238L9.02496 11.1265H9.26053L9.33331 10.8072Z" fill="white"/>
				</svg>
				<svg class="ic__dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
				    <path d="M7 10l5 5 5-5z"/>
				    <path d="M0 0h24v24H0z" fill="none"/>
				</svg>
			</span>
            <select name="phone-country-code">
				<option>United States</option>
				<option>Canada</option>
				<option>United Kingdom</option>
			</select>
        </div><input type="tel" class="text-input__input" placeholder="(555) 555-5555" name="phoneNumber" id="phone-number" />
    </div>
</div>
<div class="text-input {{class}}">
	{{#if label}}
		{{> @input-pre}}
	{{/if}}
	{{> @input-inner}}
</div>
{
  "label": "Phone Number",
  "placeholder": "(555) 555-5555",
  "type": "tel",
  "phoneNumber": true,
  "id": "phone-number",
  "name": "phoneNumber",
  "class": "text-input--is-focused"
}

Phone Input

Phone Inputs accept phone numbers based on the selected country. This helps us increase the likelihood that the user will enter a valid phone number.

When to use:

Only use the Phone Input to ask for phone number.

When not to use:

  • When not asking for a phone number; use another type of input