D.School Component Library

Fieldset 

<fieldset class="o-fieldset u-spacing o-form__item">
      <legend>Legend</legend>
      <div class="o-input o-form__item">
          <label for="name">
              Name
          </label>
          <input id="name" name="name" type="text" placeholder="First & Last Name" />
      </div>
      <div class="o-input o-form__item">
          <label for="phone">
              Phone
          </label>
          <input id="phone" name="phone" type="tel" placeholder="(xxx) xxx-xxxx" />
      </div>
  </fieldset>
 
{% set base_class = fieldset.base_class|default('o-fieldset') %}
{% if fieldset.items or fieldset.legend %}
  <fieldset class="{{ bem(base_class, fieldset.element, fieldset.modifiers, fieldset.extra) }} o-form__item" {{ attributes(fieldset.attributes) }}>
    {% if fieldset.legend %}
      <legend>{{ fieldset.legend }}</legend>
    {% endif %}
    {% for item in fieldset.items %}
      {% include "@" ~ item.type with item.value %}
    {% endfor %}
  </fieldset>
{% endif %}
 
{
  "fieldset": {
    "legend": "Legend",
    "extra": "u-spacing",
    "items": [
      {
        "type": "input",
        "value": {
          "input": {
            "name": "name",
            "label": "Name",
            "type": "text",
            "attributes": {
              "placeholder": "First & Last Name"
            }
          }
        }
      },
      {
        "type": "input",
        "value": {
          "input": {
            "name": "phone",
            "label": "Phone",
            "type": "tel",
            "attributes": {
              "placeholder": "(xxx) xxx-xxxx"
            }
          }
        }
      }
    ]
  }
}

No notes defined.