San Francisco Design System

Number field: With Units 

<form>
    <div class="form-group field-d06" data-id="construction_duration">
        <label for="construction_duration" class="control-label">How long do you estimate it will take you to build the ADU?</label>
        <div class="field-wrapper">
            <input id="construction_duration" data-formtype="d06" type="number" required="" step="any" data-required-error="You need to enter a number." class="length-5">

            <span class="units">months</span>

            <div class="help-block with-errors"></div>
        </div>
    </div>
</form>
 
<form>
  <div class="form-group field-d06" data-id="{{ id }}">
    <label for="{{ id }}" class="control-label">{{ title }}</label>
    <div class="field-wrapper">
      <input id="{{ id }}" data-formtype="d06" type="number" required="" step="any" data-required-error="You need to enter a number." class="length-5">
      {% if units %}
        <span class="units">{{ units }}</span>
      {% endif %}
      <div class="help-block with-errors"></div>
    </div>
  </div>
</form>
 
{
  "title": "How long do you estimate it will take you to build the ADU?",
  "id": "construction_duration",
  "units": "months"
}

There are no notes for this item.