Selectors

Selectors

All selectors on the site are preceded by brief header which ends with a colon, such as “Explore data:” or “Browse this section:”. The first item in the selector list should be a specific call to action, such as “Choose location”. Green year selectors are an exception to this, because they default to the most recent year.

<div class="container-left-4 container-margin">
    <div>
        <label>Selector call to action:</label>
        <select>
      <option>Choose one</option>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
    </div>
</div>

<div class="container-margin">
    <section class="year-switcher-section">
        <div class="pre-sticky"></div>
        <h3 class="h3-bar sticky sticky-header-wrapper flex-row stuck">
            <span class="flex-row-flex">Production on federal land nationwide</span>
            <select class="chart-selector flex-row-icon">
     <option value="2016" selected="">2016</option>
     <option value="2015">2015</option>
     <option value="2014">2014</option>
     <option value="2013">2013</option>
     <option value="2012">2012</option>
     <option value="2011">2011</option>
     <option value="2010">2010</option>
     <option value="2009">2009</option>
     <option value="2008">2008</option>
     <option value="2007">2007</option>
    </select>
</div>

<div class="container-left-4 container-margin">
    <label>State selector call to action:</label>
    <select id="location-selector" class="select-dark-gray">

      <option value="">Choose item</option>
        <optgroup label="Regions">
            <option value="-0">Alaska offshore region</option>
            <option value="-1">Atlantic Ocean</option>
            <option value="-2">Gulf of Mexico</option>
            <option value="-3">Pacific Ocean</option>
        </optgroup>
        <optgroup label="States">
            <option value="-0">Alaska</option>
            <option value="-1">Alabama</option>
            <option value="-2">Arkansas</option>
            <option value="-3">Arizona</option>
            <option value="-4">California</option>
            <option value="-5">Colorado</option>
            <option value="-6">Connecticut</option>
            <option value="-7">Washington, DC</option>
            <option value="-8">Delaware</option>
            <option value="-9">Florida</option>
            <option value="-10">Georgia</option>
            <option value="-11">Hawaii</option>
            <option value="-12">Iowa</option>
            <option value="-13">Idaho</option>
            <option value="-14">Illinois</option>
            <option value="-15">Indiana</option>
            <option value="-16">Kansas</option>
            <option value="-17">Kentucky</option>
            <option value="-18">Louisiana</option>
            <option value="-19">Massachusetts</option>
            <option value="-20">Maryland</option>
            <option value="-21">Maine</option>
            <option value="-22">Michigan</option>
            <option value="-23">Minnesota</option>
            <option value="-24">Missouri</option>
            <option value="-25">Mississippi</option>
            <option value="-26">Montana</option>
            <option value="-27">North Carolina</option>
            <option value="-28">North Dakota</option>
            <option value="-29">Nebraska</option>
            <option value="-30">New Hampshire</option>
            <option value="-31">New Jersey</option>
            <option value="-32">New Mexico</option>
            <option value="-33">Nevada</option>
            <option value="-34">New York</option>
            <option value="-35">Ohio</option>
            <option value="-36">Oklahoma</option>
            <option value="-37">Oregon</option>
            <option value="-38">Pennsylvania</option>
            <option value="-39">Rhode Island</option>
            <option value="-40">South Carolina</option>
            <option value="-41">South Dakota</option>
            <option value="-42">Tennessee</option>
            <option value="-43">Texas</option>
            <option value="-44">Utah</option>
            <option value="-45">Virginia</option>
            <option value="-46">Vermont</option>
            <option value="-47">Washington</option>
            <option value="-48">Wisconsin</option>
            <option value="-49">West Virginia</option>
            <option value="-50">Wyoming</option>
        </optgroup>
    </select>
</div>
</div>
<div class="container-left-4 container-margin">
  <div>
    <label>Selector call to action:</label>
    <select>
      <option>Choose one</option>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </div>
</div>

  <div class="container-margin">
    <section class="year-switcher-section">
    <div class="pre-sticky"></div><h3 class="h3-bar sticky sticky-header-wrapper flex-row stuck">
     <span class="flex-row-flex">Production on federal land nationwide</span>
    <select class="chart-selector flex-row-icon">
     <option value="2016" selected="">2016</option>
     <option value="2015">2015</option>
     <option value="2014">2014</option>
     <option value="2013">2013</option>
     <option value="2012">2012</option>
     <option value="2011">2011</option>
     <option value="2010">2010</option>
     <option value="2009">2009</option>
     <option value="2008">2008</option>
     <option value="2007">2007</option>
    </select>
  </div>

  <div class="container-left-4 container-margin">
    <label>State selector call to action:</label>
    <select
      id="location-selector"
      class="select-dark-gray">

      <option value="">Choose item</option>
      {{#each with-groups}}
        <optgroup label="{{ name }}">
          {{#each options}}
            <option value="{{ name }}-{{@index}}">{{ this }}</option>
          {{/each}}
        </optgroup>
      {{/each }}
    </select>
  </div>
</div>
{
  "with-groups": [
    {
      "name": "Regions",
      "options": [
        "Alaska offshore region",
        "Atlantic Ocean",
        "Gulf of Mexico",
        "Pacific Ocean"
      ]
    },
    {
      "name": "States",
      "options": [
        "Alaska",
        "Alabama",
        "Arkansas",
        "Arizona",
        "California",
        "Colorado",
        "Connecticut",
        "Washington, DC",
        "Delaware",
        "Florida",
        "Georgia",
        "Hawaii",
        "Iowa",
        "Idaho",
        "Illinois",
        "Indiana",
        "Kansas",
        "Kentucky",
        "Louisiana",
        "Massachusetts",
        "Maryland",
        "Maine",
        "Michigan",
        "Minnesota",
        "Missouri",
        "Mississippi",
        "Montana",
        "North Carolina",
        "North Dakota",
        "Nebraska",
        "New Hampshire",
        "New Jersey",
        "New Mexico",
        "Nevada",
        "New York",
        "Ohio",
        "Oklahoma",
        "Oregon",
        "Pennsylvania",
        "Rhode Island",
        "South Carolina",
        "South Dakota",
        "Tennessee",
        "Texas",
        "Utah",
        "Virginia",
        "Vermont",
        "Washington",
        "Wisconsin",
        "West Virginia",
        "Wyoming"
      ]
    }
  ]
}