Missouri State University Pattern Library

Address

There are no notes for this item.

<div class="form-control Page1">
    <label for="field-1">Street</label>
    <input id="field-1" type="text" name="Field_street" />

</div>
<div class="form-control Page2">
    <label for="field-2">City</label>
    <input id="field-2" type="text" name="Field_city" />

</div>
<div class="form-control Page3">
    <label for="field-3">State</label>
    <div class="description" id="description-3"></div>
    <select name="Field_state" id="field-3">
            <option value="" selected>--Select an option--</option>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AS">American Samoa</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>
            <option value="CO">Colorado</option>
            <option value="CT">Connecticut</option>
            <option value="DE">Delaware</option>
            <option value="DC">District of Columbia</option>
            <option value="FM">Fed St of Micronesia</option>
            <option value="FL">Florida</option>
            <option value="GA">Georgia</option>
            <option value="GU">Guam</option>
            <option value="HI">Hawaii</option>
            <option value="ID">Idaho</option>
            <option value="IL">Illinois</option>
            <option value="IN">Indiana</option>
            <option value="IA">Iowa</option>
            <option value="KS">Kansas</option>
            <option value="KY">Kentucky</option>
            <option value="LA">Louisiana</option>
            <option value="ME">Maine</option>
            <option value="MH">Marshall Islands</option>
            <option value="MD">Maryland</option>
            <option value="MA">Massachusetts</option>
            <option value="MI">Michigan</option>
            <option value="MN">Minnesota</option>
            <option value="MS">Mississippi</option>
            <option value="MO">Missouri</option>
            <option value="MT">Montana</option>
            <option value="NE">Nebraska</option>
            <option value="NV">Nevada</option>
            <option value="NH">New Hampshire</option>
            <option value="NJ">New Jersey</option>
            <option value="NM">New Mexico</option>
            <option value="NY">New York</option>
            <option value="NC">North Carolina</option>
            <option value="ND">North Dakota</option>
            <option value="MP">No Mariana Islands</option>
            <option value="OH">Ohio</option>
            <option value="OK">Oklahoma</option>
            <option value="OR">Oregon</option>
            <option value="PW">Palau</option>
            <option value="PA">Pennsylvania</option>
            <option value="PR">Puerto Rico</option>
            <option value="RI">Rhode Island</option>
            <option value="SC">South Carolina</option>
            <option value="SD">South Dakota</option>
            <option value="TN">Tennessee</option>
            <option value="TX">Texas</option>
            <option value="UT">Utah</option>
            <option value="VT">Vermont</option>
            <option value="VI">Virgin Islands</option>
            <option value="VA">Virginia</option>
            <option value="WA">Washington</option>
            <option value="WV">West Virginia</option>
            <option value="WI">Wisconsin</option>
            <option value="WY">Wyoming</option>
            <option value="AE">Armed Forces Africa</option>
            <option value="AA">Armed Forces Americas</option>
            <option value="AE">Armed Forces Canada</option>
            <option value="AE">Armed Forces Europe</option>
            <option value="AE">Armed Forces Middle East</option>
            <option value="AP">Armed Forces Pacific</option>
        </select>

</div>
<div class="form-control Page4">
    <label for="field-4">Zip code</label>
    <input id="field-4" type="text" name="Field_zip_code" />

</div>
 
{{> @input--text address}}
{{> @input--text city}}
{{> @dropdown--states state}}
{{> @input--text zip}}
 
{
  "address": {
    "pageId": 1,
    "label": "Street",
    "name": "street"
  },
  "city": {
    "pageId": 2,
    "label": "City",
    "name": "city"
  },
  "state": {
    "pageId": 3,
    "type": "dropdown",
    "label": "State",
    "name": "state",
    "group": [
      {
        "control": [
          {
            "option": "--Select an option--",
            "selected": true,
            "value": null
          },
          {
            "option": "Alabama",
            "value": "AL"
          },
          {
            "option": "Alaska",
            "value": "AK"
          },
          {
            "option": "American Samoa",
            "value": "AS"
          },
          {
            "option": "Arizona",
            "value": "AZ"
          },
          {
            "option": "Arkansas",
            "value": "AR"
          },
          {
            "option": "California",
            "value": "CA"
          },
          {
            "option": "Colorado",
            "value": "CO"
          },
          {
            "option": "Connecticut",
            "value": "CT"
          },
          {
            "option": "Delaware",
            "value": "DE"
          },
          {
            "option": "District of Columbia",
            "value": "DC"
          },
          {
            "option": "Fed St of Micronesia",
            "value": "FM"
          },
          {
            "option": "Florida",
            "value": "FL"
          },
          {
            "option": "Georgia",
            "value": "GA"
          },
          {
            "option": "Guam",
            "value": "GU"
          },
          {
            "option": "Hawaii",
            "value": "HI"
          },
          {
            "option": "Idaho",
            "value": "ID"
          },
          {
            "option": "Illinois",
            "value": "IL"
          },
          {
            "option": "Indiana",
            "value": "IN"
          },
          {
            "option": "Iowa",
            "value": "IA"
          },
          {
            "option": "Kansas",
            "value": "KS"
          },
          {
            "option": "Kentucky",
            "value": "KY"
          },
          {
            "option": "Louisiana",
            "value": "LA"
          },
          {
            "option": "Maine",
            "value": "ME"
          },
          {
            "option": "Marshall Islands",
            "value": "MH"
          },
          {
            "option": "Maryland",
            "value": "MD"
          },
          {
            "option": "Massachusetts",
            "value": "MA"
          },
          {
            "option": "Michigan",
            "value": "MI"
          },
          {
            "option": "Minnesota",
            "value": "MN"
          },
          {
            "option": "Mississippi",
            "value": "MS"
          },
          {
            "option": "Missouri",
            "value": "MO"
          },
          {
            "option": "Montana",
            "value": "MT"
          },
          {
            "option": "Nebraska",
            "value": "NE"
          },
          {
            "option": "Nevada",
            "value": "NV"
          },
          {
            "option": "New Hampshire",
            "value": "NH"
          },
          {
            "option": "New Jersey",
            "value": "NJ"
          },
          {
            "option": "New Mexico",
            "value": "NM"
          },
          {
            "option": "New York",
            "value": "NY"
          },
          {
            "option": "North Carolina",
            "value": "NC"
          },
          {
            "option": "North Dakota",
            "value": "ND"
          },
          {
            "option": "No Mariana Islands",
            "value": "MP"
          },
          {
            "option": "Ohio",
            "value": "OH"
          },
          {
            "option": "Oklahoma",
            "value": "OK"
          },
          {
            "option": "Oregon",
            "value": "OR"
          },
          {
            "option": "Palau",
            "value": "PW"
          },
          {
            "option": "Pennsylvania",
            "value": "PA"
          },
          {
            "option": "Puerto Rico",
            "value": "PR"
          },
          {
            "option": "Rhode Island",
            "value": "RI"
          },
          {
            "option": "South Carolina",
            "value": "SC"
          },
          {
            "option": "South Dakota",
            "value": "SD"
          },
          {
            "option": "Tennessee",
            "value": "TN"
          },
          {
            "option": "Texas",
            "value": "TX"
          },
          {
            "option": "Utah",
            "value": "UT"
          },
          {
            "option": "Vermont",
            "value": "VT"
          },
          {
            "option": "Virgin Islands",
            "value": "VI"
          },
          {
            "option": "Virginia",
            "value": "VA"
          },
          {
            "option": "Washington",
            "value": "WA"
          },
          {
            "option": "West Virginia",
            "value": "WV"
          },
          {
            "option": "Wisconsin",
            "value": "WI"
          },
          {
            "option": "Wyoming",
            "value": "WY"
          },
          {
            "option": "Armed Forces Africa",
            "value": "AE"
          },
          {
            "option": "Armed Forces Americas",
            "value": "AA"
          },
          {
            "option": "Armed Forces Canada",
            "value": "AE"
          },
          {
            "option": "Armed Forces Europe",
            "value": "AE"
          },
          {
            "option": "Armed Forces Middle East",
            "value": "AE"
          },
          {
            "option": "Armed Forces Pacific",
            "value": "AP"
          }
        ]
      }
    ]
  },
  "zip": {
    "pageId": 4,
    "label": "Zip code",
    "name": "zip_code"
  }
}