San Francisco Design System

Address field 

<form>
    <div class="field-address">
        <fieldset>
            <legend>What is the address of your project?</legend>

            <div class="form-group">
                <label for="project_address_line1">Address Line 1</label>
                <input type="text" id="project_address_line1" required="required">
                <p class="help-block with-errors with-errors-inline"></p>
            </div>

            <div class="form-group">
                <label for="project_address_line2">Address Line 2 <span class="optional">(optional)</span></label>
                <input type="text" id="project_address_line2">
                <p class="help-block with-errors with-errors-inline"></p>
            </div>

            <div class="form-group">
                <label for="project_address_city">City</label>
                <input type="text" id="project_address-city" required="required" data-error="Please enter a city.">
                <p class="help-block with-errors with-errors-inline"></p>
            </div>

            <div class="field-address-state form-group">
                <label for="project_address_state">State</label>
                <select id="project_address_state" required="required" data-error="Please choose a state.">
          <option value="">Choose a state</option>
          
            <option value="AL">Alabama</option>
          
            <option value="AK">Alaska</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="FL">Florida</option>
          
            <option value="GA">Georgia</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="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="OH">Ohio</option>
          
            <option value="OK">Oklahoma</option>
          
            <option value="OR">Oregon</option>
          
            <option value="PA">Pennsylvania</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="VA">Virginia</option>
          
            <option value="WA">Washington</option>
          
            <option value="WV">West Virginia</option>
          
            <option value="WI">Wisconsin</option>
          
            <option value="WY">Wyoming</option>
          
        </select>
                <p class="help-block with-errors with-errors-inline"></p>
            </div>

            <div class="field-address-zip form-group">
                <label for="project_address_zip" required="required" data-error="Please enter a ZIP code.">ZIP code</label>
                <input type="number" id="project_address_zip" maxlength="5" class="length-5">
                <p class="help-block with-errors with-errors-inline"></p>
            </div>
        </fieldset>
    </div>
</form>
 
<form>
  <div class="field-address">
    <fieldset>
      <legend>{{ title }}</legend>

      <div class="form-group">
        <label for="{{ id}}_line1">Address Line 1</label>
        <input type="text" id="{{ id}}_line1" required="required">
        <p class="help-block with-errors with-errors-inline"></p>
      </div>

      <div class="form-group">
        <label for="{{ id}}_line2">Address Line 2 <span class="optional">(optional)</span></label>
        <input type="text" id="{{ id }}_line2">
        <p class="help-block with-errors with-errors-inline"></p>
      </div>


      <div class="form-group">
        <label for="{{ id}}_city">City</label>
        <input type="text" id="{{ id}}-city" required="required" data-error="Please enter a city.">
        <p class="help-block with-errors with-errors-inline"></p>
      </div>

      <div class="field-address-state form-group">
        <label for="{{ id }}_state">State</label>
        <select id="{{ id }}_state" required="required" data-error="Please choose a state.">
          <option value="">Choose a state</option>
          {% for state in states %}
            <option value="{{ state.value }}">{{ state.name }}</option>
          {% endfor %}
        </select>
        <p class="help-block with-errors with-errors-inline"></p>
      </div>

      <div class="field-address-zip form-group">
        <label for="{{ id }}_zip" required="required" data-error="Please enter a ZIP code.">ZIP code</label>
        <input type="number" id="{{ id}}_zip" maxlength="5" class="length-5">
        <p class="help-block with-errors with-errors-inline"></p>
      </div>
    </fieldset>
  </div>
</form>
 
{
  "title": "What is the address of your project?",
  "id": "project_address",
  "states": [
    {
      "value": "AL",
      "name": "Alabama"
    },
    {
      "value": "AK",
      "name": "Alaska"
    },
    {
      "value": "AZ",
      "name": "Arizona"
    },
    {
      "value": "AR",
      "name": "Arkansas"
    },
    {
      "value": "CA",
      "name": "California"
    },
    {
      "value": "CO",
      "name": "Colorado"
    },
    {
      "value": "CT",
      "name": "Connecticut"
    },
    {
      "value": "DE",
      "name": "Delaware"
    },
    {
      "value": "DC",
      "name": "District Of Columbia"
    },
    {
      "value": "FL",
      "name": "Florida"
    },
    {
      "value": "GA",
      "name": "Georgia"
    },
    {
      "value": "HI",
      "name": "Hawaii"
    },
    {
      "value": "ID",
      "name": "Idaho"
    },
    {
      "value": "IL",
      "name": "Illinois"
    },
    {
      "value": "IN",
      "name": "Indiana"
    },
    {
      "value": "IA",
      "name": "Iowa"
    },
    {
      "value": "KS",
      "name": "Kansas"
    },
    {
      "value": "KY",
      "name": "Kentucky"
    },
    {
      "value": "LA",
      "name": "Louisiana"
    },
    {
      "value": "ME",
      "name": "Maine"
    },
    {
      "value": "MD",
      "name": "Maryland"
    },
    {
      "value": "MA",
      "name": "Massachusetts"
    },
    {
      "value": "MI",
      "name": "Michigan"
    },
    {
      "value": "MN",
      "name": "Minnesota"
    },
    {
      "value": "MS",
      "name": "Mississippi"
    },
    {
      "value": "MO",
      "name": "Missouri"
    },
    {
      "value": "MT",
      "name": "Montana"
    },
    {
      "value": "NE",
      "name": "Nebraska"
    },
    {
      "value": "NV",
      "name": "Nevada"
    },
    {
      "value": "NH",
      "name": "New Hampshire"
    },
    {
      "value": "NJ",
      "name": "New Jersey"
    },
    {
      "value": "NM",
      "name": "New Mexico"
    },
    {
      "value": "NY",
      "name": "New York"
    },
    {
      "value": "NC",
      "name": "North Carolina"
    },
    {
      "value": "ND",
      "name": "North Dakota"
    },
    {
      "value": "OH",
      "name": "Ohio"
    },
    {
      "value": "OK",
      "name": "Oklahoma"
    },
    {
      "value": "OR",
      "name": "Oregon"
    },
    {
      "value": "PA",
      "name": "Pennsylvania"
    },
    {
      "value": "RI",
      "name": "Rhode Island"
    },
    {
      "value": "SC",
      "name": "South Carolina"
    },
    {
      "value": "SD",
      "name": "South Dakota"
    },
    {
      "value": "TN",
      "name": "Tennessee"
    },
    {
      "value": "TX",
      "name": "Texas"
    },
    {
      "value": "UT",
      "name": "Utah"
    },
    {
      "value": "VT",
      "name": "Vermont"
    },
    {
      "value": "VA",
      "name": "Virginia"
    },
    {
      "value": "WA",
      "name": "Washington"
    },
    {
      "value": "WV",
      "name": "West Virginia"
    },
    {
      "value": "WI",
      "name": "Wisconsin"
    },
    {
      "value": "WY",
      "name": "Wyoming"
    }
  ]
}
  • Handle: @address-field
  • Preview:
  • Filesystem Path: src/components/04-forms/field-types/address-field/address-field.html

There are no notes for this item.