<form class="usa-form usa-form--large">
<fieldset class="usa-fieldset">
<legend class="usa-legend usa-legend--large">Mailing address</legend>
<p>
Required fields are marked with an asterisk (<abbr title="required" class="usa-hint usa-hint--required">*</abbr>).
</p>
<label class="usa-label" for="mailing-address-1">
Street address <abbr title="required" class="usa-hint usa-hint--required">*</abbr>
</label>
<input class="usa-input" id="mailing-address-1" name="mailing-address-1" type="text" required>
<div class="grid-row grid-gap">
<div class="mobile-lg:grid-col-8">
<label class="usa-label" for="apt-suite-other">Unit type</label>
<div class="usa-combo-box">
<select class="usa-select" id="apt-suite-other" name="apt-suite-other">
<option value>- Select -</option>
<option value="APT">APT - Apartment</option>
<option value="BSMT">BSMT - Basement</option>
<option value="BLDG">BLDG - Building</option>
<option value="DEPT">DEPT - Department</option>
<option value="FL">FL - Floor</option>
<option value="FRNT">FRNT - Front</option>
<option value="HNGR">HNGR - Hanger</option>
<option value="KEY">KEY - Key</option>
<option value="LBBY">LBBY - Lobby</option>
<option value="LOT">LOT - Lot</option>
<option value="LOWR">LOWR - Lower</option>
<option value="OFC">OFC - Office</option>
<option value="OTHER">Other</option>
<option value="PH">PH - Penthouse</option>
<option value="PIER">PIER - Pier</option>
<option value="REAR">REAR - Rear</option>
<option value="RM">RM - Room</option>
<option value="SIDE">SIDE - Side</option>
<option value="SLIP">SLIP - Slip</option>
<option value="SPC">SPC - Space</option>
<option value="STOP">STOP - Stop</option>
<option value="STE">STE - Suite</option>
<option value="TRLR">TRLR - Trailer</option>
<option value="UNAVAILABLE">Unable to determine</option>
<option value="UNIT">UNIT - Unit</option>
<option value="UPPR">UPPR - Upper</option>
</select>
</div>
</div>
<div class="mobile-lg:grid-col-4">
<label class="usa-label" for="apt-floor-suite-no">Unit number</label>
<input class="usa-input" id="apt-floor-suite-no" name="apt-floor-suite-no" type="text">
</div>
</div>
<label class="usa-label" for="city">City <abbr title="required" class="usa-hint usa-hint--required">*</abbr></label>
<input class="usa-input" id="city" name="city" type="text" required>
<label class="usa-label" for="state">State <abbr title="required" class="usa-hint usa-hint--required">*</abbr></label>
<div class="usa-combo-box">
<select class="usa-select" id="state" name="state" required>
<option value>- Select -</option>
<option value="AL">AL - Alabama</option>
<option value="AK">AK - Alaska</option>
<option value="AS">AS - American Samoa</option>
<option value="AZ">AZ - Arizona</option>
<option value="AR">AR - Arkansas</option>
<option value="CA">CA - California</option>
<option value="CO">CO - Colorado</option>
<option value="CT">CT - Connecticut</option>
<option value="DE">DE - Delaware</option>
<option value="DC">DC - District of Columbia</option>
<option value="FL">FL - Florida</option>
<option value="GA">GA - Georgia</option>
<option value="GU">GU - Guam</option>
<option value="HI">HI - Hawaii</option>
<option value="ID">ID - Idaho</option>
<option value="IL">IL - Illinois</option>
<option value="IN">IN - Indiana</option>
<option value="IA">IA - Iowa</option>
<option value="KS">KS - Kansas</option>
<option value="KY">KY - Kentucky</option>
<option value="LA">LA - Louisiana</option>
<option value="ME">ME - Maine</option>
<option value="MD">MD - Maryland</option>
<option value="MA">MA - Massachusetts</option>
<option value="MI">MI - Michigan</option>
<option value="MN">MN - Minnesota</option>
<option value="MS">MS - Mississippi</option>
<option value="MO">MO - Missouri</option>
<option value="MT">MT - Montana</option>
<option value="NE">NE - Nebraska</option>
<option value="NV">NV - Nevada</option>
<option value="NH">NH - New Hampshire</option>
<option value="NJ">NJ - New Jersey</option>
<option value="NM">NM - New Mexico</option>
<option value="NY">NY - New York</option>
<option value="NC">NC - North Carolina</option>
<option value="ND">ND - North Dakota</option>
<option value="MP">MP - Northern Mariana Islands</option>
<option value="OH">OH - Ohio</option>
<option value="OK">OK - Oklahoma</option>
<option value="OR">OR - Oregon</option>
<option value="PA">PA - Pennsylvania</option>
<option value="PR">PR - Puerto Rico</option>
<option value="RI">RI - Rhode Island</option>
<option value="SC">SC - South Carolina</option>
<option value="SD">SD - South Dakota</option>
<option value="TN">TN - Tennessee</option>
<option value="TX">TX - Texas</option>
<option value="UM">UM - United States Minor Outlying Islands</option>
<option value="UT">UT - Utah</option>
<option value="VT">VT - Vermont</option>
<option value="VI">VI - Virgin Islands</option>
<option value="VA">VA - Virginia</option>
<option value="WA">WA - Washington</option>
<option value="WV">WV - West Virginia</option>
<option value="WI">WI - Wisconsin</option>
<option value="WY">WY - Wyoming</option>
<option value="AA">AA - Armed Forces Americas</option>
<option value="AE">AE - Armed Forces Africa</option>
<option value="AE">AE - Armed Forces Canada</option>
<option value="AE">AE - Armed Forces Europe</option>
<option value="AE">AE - Armed Forces Middle East</option>
<option value="AP">AP - Armed Forces Pacific</option>
</select>
</div>
<label class="usa-label" for="zip">ZIP code <abbr title="required" class="usa-hint usa-hint--required">*</abbr></label>
<input class="usa-input usa-input--medium" id="zip" name="zip" type="text" pattern="[\d]{5}(-[\d]{4})?" required>
</fieldset>
</form>
No notes defined.
package:
name: metro-digital-design-system-demo
version: 0.1.0
uswds:
path: ../../../dist
placeholderLink: javascript:void()