Missouri State University Pattern Library

Dropdown: States

There are no notes for this item.

<div class="form-control Page1">
    <label for="field-1">Lorem ipsum dolor sit amet consectetur</label>
    <div class="description" id="description-1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis deserunt ullam temporibus sunt! Quo libero aut atque beatae, distinctio quasi.</div>
    <select name="Field_lorem_ipsum_dolor" id="field-1" aria-describedby="description-1">
            <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>
 
{{#> @control-wrapper}}
    {{#*inline 'container'}}
        {{> @label}}
        {{> @description}}

        <select name="Field_{{name}}" id="field-{{pageId}}" {{#if required}} required aria-required="true"{{/if}}{{#if description}}aria-describedby="description-{{pageId}}"{{/if}}>
        {{#> control}}
        {{#each group}}
            {{#if label}}
            <optgroup label="{{label}}">
            {{/if}}
            {{#each control}}
            <option value="{{value}}"{{#if selected}} selected{{/if}}{{#if disabled}} disabled{{/if}}>{{option}}</option>
            {{/each}}
            {{#if label}}
            </optgroup>
            {{/if}}
        {{/each}}
        {{/control}}
        </select>
    {{/inline}}
{{/@control-wrapper}}
 
{
  "pageId": 1,
  "label": "Lorem ipsum dolor sit amet consectetur",
  "name": "lorem_ipsum_dolor",
  "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis deserunt ullam temporibus sunt! Quo libero aut atque beatae, distinctio quasi.",
  "DefaultToMo": null,
  "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"
        }
      ]
    }
  ]
}