Templates

Address form

Enter a standard U.S. mailing or shipping address.

Mailing address

Required fields are marked with an asterisk (*). 

<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"
      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"
        />
      </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" 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">
        <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"
      pattern="[\d]{5}(-[\d]{4})?"
      required
    />
  </fieldset>
</form>

Guidance

When to use the address form template

  • You need separate data elements. When you need to be able to parse out the specific parts of a mailing address.

When to consider something else

  • Nonstandard addresses. If you need to collect addresses that may not fit this format (for example, international addresses).
  • You don’t need separate data elements. If you don’t need to be able to parse out the individual pieces of an address, consider letting users type the entire address into one large text area.

Usability guidance

  • Deprecated USWDS 2.10.2 Don’t call out required fields. Call out optional fields instead. Users can infer that non-optional fields are required.
  • Avoid dropdowns. If possible, let users type their state’s abbreviation when they reach the state drop-down menu.
  • Support both five- and nine-digit ZIP codes. Some addresses require a nine-digit ZIP code. If you would like to use an input mask, it should be “#####-####” so that the text is properly formatted, regardless of whether a user enters a five- or nine-digit ZIP code.

Accessibility

Using the address form template

  • We limit the characters in the ZIP code field to numbers and the hyphen (-), following the pattern pattern="[\d]{5}(-[\d]{4})?". If you need your ZIP code field to allow non-U.S. postal codes that use a different pattern or require different characters, remove or edit the pattern property.

Additional information

Package

  • Package usage: @forward "usa-form-templates";