San Francisco Design System

Dropdown 

<form>
    <div class="form-group field-s02" data-id="">
        <label for="" class="control-label">Type of construction</label>
        <div class="field-wrapper">
            <select id="" data-formtype="s02" name="" required="">
        <option value="">Choose an option</option>
        
          <option value="0">I-A: Fire Resistive Non-Combustible</option>
        
          <option value="1">I-B: Fire Resistive Non-Combustible</option>
        
          <option value="2">II-A: Protected Non-Combustible</option>
        
          <option value="3">II-B: Unprotected Non-Combustible</option>
        
          <option value="4">III-A: Protected Combustible</option>
        
          <option value="5">III-B: Unprotected Combustible</option>
        
          <option value="6">IV: Heavy Timber</option>
        
          <option value="7">V-A: Protected Wood Frame</option>
        
          <option value="8">V-B: Unprotected Wood Frame</option>
        
      </select>
            <div class="help-block with-errors"></div>
        </div>
    </div>
</form>
 
<form>
  <div class="form-group field-s02" data-id="{{ id }}">
    <label for="{{ id }}" class="control-label">{{ title }}</label>
    <div class="field-wrapper">
      <select id="{{ id }}" data-formtype="s02" name="{{ id }}" required="">
        <option value="">Choose an option</option>
        {% for option in options %}
          <option value="{{ loop.index0 }}">{{ option.title }}</option>
        {% endfor %}
      </select>
      <div class="help-block with-errors"></div>
    </div>
  </div>
</form>
 
{
  "title": "Type of construction",
  "options": [
    {
      "title": "I-A: Fire Resistive Non-Combustible"
    },
    {
      "title": "I-B: Fire Resistive Non-Combustible"
    },
    {
      "title": "II-A: Protected Non-Combustible"
    },
    {
      "title": "II-B: Unprotected Non-Combustible"
    },
    {
      "title": "III-A: Protected Combustible"
    },
    {
      "title": "III-B: Unprotected Combustible"
    },
    {
      "title": "IV: Heavy Timber"
    },
    {
      "title": "V-A: Protected Wood Frame"
    },
    {
      "title": "V-B: Unprotected Wood Frame"
    }
  ]
}

There are no notes for this item.