Patterns: Create a user profile

Address

Help a user input their physical or mailing addresses for successful communication.

The physical and mailing address patterns help users enter their address successfully.

About these patterns

What problems do these patterns solve?

While most addresses in the U.S. follow a specific pattern, there are unique variations in some rural areas, U.S. territories, and military posts. In addition, some people are unhoused or in temporary housing, and may need to specify a mailing address that is different from their physical address — particularly in disaster relief and recovery situations.

Physical address

When to use this pattern

Use this pattern when you need the physical location of a person and you need to parse out the specific parts of the address. This may be important when determining benefits eligibility, for disaster recovery purposes, or other reasons. Since physical addresses may be new, temporary, or not currently served by the USPS consider asking for a mailing address, too. Physical addresses may be where a building or property is located, or potentially where a displaced individual is currently located. Mailing addresses are where postal mail must be sent.

When to consider something else

This pattern supports domestic U.S. addresses, including the U.S. territories and military outposts. If you need to collect addresses that may not fit this format, such as international addresses for citizens living overseas, you will need to use something else.

What’s the solution

Provide all the fields needed for a user to provide a physical address, even less conventional attributes like a Google Plus Code.

Guidance

What to do

• Do support long text fields.
• Do support a rich array of diacritics, accents, and alternative characters.
• Do allow both upper and lowercase letters throughout each field.
• Allow users to enter hyphens, apostrophes, special characters, and blank spaces in each name field.
• Consider using the autocomplete attribute on address input fields to allow the browser to autofill information that has been previously entered.
• Provide rich information cues in dropdowns. For example, for state dropdowns, use MD - Maryland and TX - Texas, rather than the state code alone.
• Do provide the Puerto Rican Urbanization field, unless your program does not serve Puerto Rico.
• If your program does not serve the armed forces or U.S. territories, you may want to provide links to related resources for these users if such resources exist.

What not to do

• Don't auto-advance focus from one field to the next. This makes it difficult for keyboard-only users to navigate and correct mistakes.
• Do not limit addresses to conventionally formatted addresses. Some rural areas and the U.S. territories have unusually formatted addresses.
• Do not assume that people can receive mail at their physical location. People in some communities can only receive mail at post office boxes.

Physical address

Required fields are marked with an asterisk (*).

Street address Street address line 2 City * State, territory, or military post *

- Select - AL - Alabama AK - Alaska AS - American Samoa AZ - Arizona AR - Arkansas CA - California CO - Colorado CT - Connecticut DE - Delaware DC - District of Columbia FL - Florida GA - Georgia GU - Guam HI - Hawaii ID - Idaho IL - Illinois IN - Indiana IA - Iowa KS - Kansas KY - Kentucky LA - Louisiana ME - Maine MD - Maryland MA - Massachusetts MI - Michigan MN - Minnesota MS - Mississippi MO - Missouri MT - Montana NE - Nebraska NV - Nevada NH - New Hampshire NJ - New Jersey NM - New Mexico NY - New York NC - North Carolina ND - North Dakota MP - Northern Mariana Islands OH - Ohio OK - Oklahoma OR - Oregon PA - Pennsylvania PR - Puerto Rico RI - Rhode Island SC - South Carolina SD - South Dakota TN - Tennessee TX - Texas UM - United States Minor Outlying Islands UT - Utah VT - Vermont VI - Virgin Islands VA - Virginia WA - Washington WV - West Virginia WI - Wisconsin WY - Wyoming AA - Armed Forces Americas AE - Armed Forces Africa AE - Armed Forces Canada AE - Armed Forces Europe AE - Armed Forces Middle East AP - Armed Forces Pacific

ZIP code Urbanization (Puerto Rico only) Google Plus Code

For example, PGX4+XX

<form class="usa-form usa-form--large">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend usa-legend--large">Physical 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="physical-address-1">Street address</label>
    <input class="usa-input" id="physical-address-1" name="physical-address-1" />
    <label class="usa-label" for="physical-address-2">Street address line 2</label>
    <input class="usa-input" id="physical-address-2" name="physical-address-2" />
    <label class="usa-label" for="physical-city">City
      <abbr title="required" class="usa-hint usa-hint--required">*</abbr></label>
    <input class="usa-input" id="physical-city" name="physical-city" required />
    <label class="usa-label" for="physical-state">State, territory, or military post
      <abbr title="required" class="usa-hint usa-hint--required">*</abbr></label>
    <div class="usa-combo-box">
      <select class="usa-select" id="physical-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="physical-zip">ZIP code</label>
    <input class="usa-input usa-input--medium" id="physical-zip" name="physical-zip" pattern="[\d]{5}(-[\d]{4})?" />
    <label class="usa-label" for="physical-urbanization">Urbanization (Puerto Rico only)</label>
    <input class="usa-input" id="physical-urbanization" name="physical-urbanization" />
    <label class="usa-label" for="google-plus-code">Google Plus Code</label>
    <div class="usa-hint" id="gpcHint">For example, PGX4+XX</div>
    <input class="usa-input" id="google-plus-code" name="google-plus-code" aria-describedby="gpcHint" />
  </fieldset>
</form>

<form class="usa-form usa-form--large">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend usa-legend--large">Physical 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="physical-address-1">Street address</label>
    <input class="usa-input" id="physical-address-1" name="physical-address-1" />
    <label class="usa-label" for="physical-address-2">Street address line 2</label>
    <input class="usa-input" id="physical-address-2" name="physical-address-2" />
    <label class="usa-label" for="physical-city">City
      <abbr title="required" class="usa-hint usa-hint--required">*</abbr></label>
    <input class="usa-input" id="physical-city" name="physical-city" required />
    <label class="usa-label" for="physical-state">State, territory, or military post
      <abbr title="required" class="usa-hint usa-hint--required">*</abbr></label>
    <div class="usa-combo-box">
      <select class="usa-select" id="physical-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="physical-zip">ZIP code</label>
    <input class="usa-input usa-input--medium" id="physical-zip" name="physical-zip" pattern="[\d]{5}(-[\d]{4})?" />
    <label class="usa-label" for="physical-urbanization">Urbanization (Puerto Rico only)</label>
    <input class="usa-input" id="physical-urbanization" name="physical-urbanization" />
    <label class="usa-label" for="google-plus-code">Google Plus Code</label>
    <div class="usa-hint" id="gpcHint">For example, PGX4+XX</div>
    <input class="usa-input" id="google-plus-code" name="google-plus-code" aria-describedby="gpcHint" />
  </fieldset>
</form>

Considerations

• Confirm you need this information. As with all personal information, consider whether you need to collect it at all. Clearly explain the reason for asking for the information and what will be done to secure the user’s privacy.
• People without fixed addresses. Some people do not have fixed addresses. Consider providing other options for reaching them.
• Physical vs. mailing address. If you do need an address, determine if you need a physical address or a mailing address, or both. Physical addresses are most important for determining benefits eligibility or for disaster response. Mailing addresses are important for correspondence.
• Both physical and mailing address. If you need both the physical and mailing address, consider providing a checkbox for same as physical address to auto-populate the mailing address.
• Google Plus Codes. Consider whether Google Plus Codes are appropriate for your audience. Google Plus Codes identify a physical location, including those that are not identifiable by a typical postal address. They can be used to identify physical locations that are very remote, where addresses are not available, where someone doesn’t have a fixed address (such as a person who is unhoused), or during an emergency.
• Puerto Rico. Consider whether residents of Puerto Rico are part of your audience. Addresses for Puerto Rico require the Urbanization field.

Usability guidance

• Consider using an input mask. In fields with a specific expected format, an input mask allows you to constrain and shape the information being entered into that format, without impairing the user’s ability to copy/paste or correct mistyping. If you use an input mask for the ZIP code field, it should be _____-____ so that the ZIP code maps to users’ experience with ZIP codes and is properly formatted, regardless of whether a user enters a five- or nine-digit ZIP code. Input masks can help a user more confidently fill out restricted fields, reduce user anxiety about making a mistake, and reduce validation errors and web form abandonment, particularly on mobile devices.
• Avoid dropdowns that require long scrolling. If possible, let users type their state or territories’ abbreviation when they reach the state dropdown menu, instead of having to scroll and select.
• Provide rich information cues in dropdowns. For example, for state dropdowns, use MD - Maryland and TX - Texas, rather than the state code alone.

Accessibility

• Follow input guidance. These text fields should follow the accessibility guidelines for all text inputs.
• Don’t auto-advance focus. Do not use JavaScript to auto advance the focus from one field to the next. This makes it difficult for keyboard-only users to navigate and correct mistakes.
• Customization. As you customize, make sure you follow accessibility guidelines for form templates and the accessibility guidelines for form controls.

Mailing address

When to use this pattern

Use this pattern when you need to provide written correspondence or materials to a person and need to parse out the elements of the address. For many people this may be the same address as their physical address.

When to consider something else

This pattern supports domestic U.S. addresses, including the U.S. territories and military outposts. If you need to collect addresses that may not fit this format, such as international addresses for citizens living overseas, you will need to use something else.

What’s the solution

Provide all the fields a user needs to successfully enter a mailing address.

Guidance

What to do

• Do support long text fields.
• Do support a rich array of diacritics, accents, and alternative characters.
• Do allow both upper and lowercase letters throughout each field.
• Allow users to enter hyphens, apostrophes, special characters, and blank spaces in each name field.
• Consider using the autocomplete attribute on address input fields to allow the browser to autofill information that has been previously entered.
• Provide rich information cues in dropdowns. For example, for state dropdowns, use MD - Maryland and TX - Texas, rather than the state code alone.
• Do provide the Puerto Rican Urbanization field, unless your program does not serve Puerto Rico.
• If the armed forces and the U.S. territories are not included, you may want to provide a link to their resources for clarity.

What not to do

• Don't auto-advance focus from one field to the next. This makes it difficult for keyboard-only users to navigate and correct mistakes.
• Do not limit addresses to conventionally formatted addresses. Some rural areas and the U.S. territories have unusually formatted addresses.
• Do not assume that people can receive mail at their physical location. People in some communities can only receive mail at post office boxes.

Mailing address

Required fields are marked with an asterisk (*).

Same as physical address

Street address * Street address line 2 City * State, territory, or military post *

- Select - AL - Alabama AK - Alaska AS - American Samoa AZ - Arizona AR - Arkansas CA - California CO - Colorado CT - Connecticut DE - Delaware DC - District of Columbia FL - Florida GA - Georgia GU - Guam HI - Hawaii ID - Idaho IL - Illinois IN - Indiana IA - Iowa KS - Kansas KY - Kentucky LA - Louisiana ME - Maine MD - Maryland MA - Massachusetts MI - Michigan MN - Minnesota MS - Mississippi MO - Missouri MT - Montana NE - Nebraska NV - Nevada NH - New Hampshire NJ - New Jersey NM - New Mexico NY - New York NC - North Carolina ND - North Dakota MP - Northern Mariana Islands OH - Ohio OK - Oklahoma OR - Oregon PA - Pennsylvania PR - Puerto Rico RI - Rhode Island SC - South Carolina SD - South Dakota TN - Tennessee TX - Texas UM - United States Minor Outlying Islands UT - Utah VT - Vermont VI - Virgin Islands VA - Virginia WA - Washington WV - West Virginia WI - Wisconsin WY - Wyoming AA - Armed Forces Americas AE - Armed Forces Africa AE - Armed Forces Canada AE - Armed Forces Europe AE - Armed Forces Middle East AP - Armed Forces Pacific

ZIP code Urbanization (Puerto Rico only)

<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>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="mailing-physical-address-same" type="checkbox"
        name="Both mailing address and physical address are the same" value="mailing-physical-address-same" />
      <label class="usa-checkbox__label" for="mailing-physical-address-same">Same as physical
        address</label>
    </div>
    <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 />
    <label class="usa-label" for="mailing-address-2">Street address line 2</label>
    <input class="usa-input" id="mailing-address-2" name="mailing-address-2" />
    <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, territory, or military post
      <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</label>
    <input class="usa-input usa-input--medium" id="zip" name="zip" pattern="[\d]{5}(-[\d]{4})?" />
    <label class="usa-label" for="urbanization">Urbanization (Puerto Rico only)</label>
    <input class="usa-input" id="urbanization" name="urbanization" />
  </fieldset>
</form>

<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>
    <div class="usa-checkbox">
      <input class="usa-checkbox__input" id="mailing-physical-address-same" type="checkbox"
        name="Both mailing address and physical address are the same" value="mailing-physical-address-same" />
      <label class="usa-checkbox__label" for="mailing-physical-address-same">Same as physical
        address</label>
    </div>
    <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 />
    <label class="usa-label" for="mailing-address-2">Street address line 2</label>
    <input class="usa-input" id="mailing-address-2" name="mailing-address-2" />
    <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, territory, or military post
      <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</label>
    <input class="usa-input usa-input--medium" id="zip" name="zip" pattern="[\d]{5}(-[\d]{4})?" />
    <label class="usa-label" for="urbanization">Urbanization (Puerto Rico only)</label>
    <input class="usa-input" id="urbanization" name="urbanization" />
  </fieldset>
</form>

Considerations

• Confirm you need this information. As with all personal information, consider whether you need to collect it at all. Clearly explain the reason for asking for the information and what will be done to secure the user’s privacy.
• People without fixed addresses. Some people do not have fixed addresses. Consider providing other options for them to be reached.
• Physical vs. mailing address. If you do need an address, determine if you need a physical address or a mailing address, or both. Physical addresses are most important for determining benefits eligibility or for disaster response. Mailing addresses are important for correspondence.
• Both physical and mailing address. If you need both the physical and mailing address, consider providing a checkbox for same as physical address to auto-populate the mailing address.

Usability guidance

• Consider using an input mask. In fields with a specific expected format, an input mask allows you to constrain and shape the information being entered into that format, without impairing the user’s ability to copy/paste or correct mistyping. If you use an input mask for the ZIP code field, it should be _____-____ so that the ZIP code maps to users’ experience with ZIP codes and is properly formatted, regardless of whether a user enters a five- or nine-digit ZIP code. Input masks can help a user more confidently fill out restricted fields, reduce user anxiety about making a mistake, and reduce validation errors and web form abandonment, particularly on mobile devices.
• Avoid dropdowns that require long scrolling. If possible, let users type their state or territories’ abbreviation when they reach the state dropdown menu, instead of having to scroll and select.
• Provide rich information cues in dropdowns. For example, for state dropdowns, use MD - Maryland and TX - Texas, rather than the state code alone.

Accessibility

• Follow input guidance. These text fields should follow the accessibility guidelines for all text inputs.
• Don’t auto-advance focus. Do not use JavaScript to auto advance the focus from one field to the next. This makes it difficult for keyboard-only users to navigate and correct mistakes.
• Customization. As you customize, make sure you follow accessibility guidelines for form templates and the accessibility guidelines for form controls.

Related components, patterns, and templates

• Checkbox component
• Input mask component
• Select component
• Text input component
• Name pattern
• Address form template

References

• Google Plus Codes. (n.d.) Retrieved July 15, 2022, from https://maps.google.com/pluscodes/
• The Navajo Nation addresses its residents with Plus Codes. (October 12, 2020) Retrieved on August 3, 2022, from https://blog.google/products/maps/plus-codes-navajo-nation/
• USPS Addressing Standards Publication 28. (n.d.) Retrieved July 15, 2022, from https://pe.usps.com/text/pub28/welcome.htm
• USPS Addressing Standards for Puerto Rico and the U.S. Virgin Islands. (n.d.) Retrieved July 15, 2022, from https://postalpro.usps.com/node/3740
• Universal Post*Code Database. (n.d.) Retrieved July 28, 2022, from https://www.upu.int/en/Postal-Solutions/Programmes-Services/Addressing-Solutions

Disclaimer

Links to nongovernment sources are made for educational or source citation purposes only, and do not represent an endorsement of the organizations by the General Services Administration. The General Services Administration does not assume any responsibility for the content, operation, or policies of other entities’ websites.

Latest updates

Meaningful code and guidance updates are listed in the following table:

Date	USWDS version	Affects	Breaking	Description
2022-11-14	3.3.0	Guidance	No	Pattern published.