<fieldset>
 <legend>Legend:</legend>
 <div class="form-field">
   <label for="">Field label</label>
 </div>
</fieldset>
<fieldset class="form-field radios">
 <legend class="eyebrow">Legend:</legend>
  <div class="radio">
    <input type="radio" id="ex_r1" name="radios" checked>
    <label for="ex_r1">Radio 1 label</label>
  </div>
  <div class="radio">
    <input type="radio" id="ex_r2" name="radios">
    <label for="ex_r2">Radio 2 label</label>
  </div>
</fieldset>
<fieldset class="form-field checks">
  <legend class="eyebrow">Legend:</legend>
  <div class="check">
    <input type="checkbox" id="ex_c1" name="checkboxes" checked>
    <label for="ex_c1">Check 1 label</label>
  </div>
  <div class="check">
    <input type="checkbox" id="ex_c2" name="checkboxes">
    <label for="ex_c2">Check 2 label</label>
  </div>
</fieldset>

<div class="form-field">
  <label>Text Input Label</label>
  <input type="text" placeholder="Text Input placeholder" class="{{modifier_class}}"  >
</div>
<div class="form-field">
  <label>Email Input Label</label>
  <input type="email" placeholder="Email Input placeholder" class="{{modifier_class}}"  >
</div>
<div class="form-field">
  <label>Password Input Label</label>
  <input type="password" placeholder="Password Input placeholder" class="{{modifier_class}}"  >
</div>
<div class="form-field">
  <label>Search Input Label</label>
  <input type="search" placeholder="Search Input placeholder" class="{{modifier_class}}"  >
</div>
<div class="form-field">
  <label>Telephone Input Label</label>
  <input type="tel" placeholder="Telephone Input placeholder" class="{{modifier_class}}"  >
</div>
<div class="form-field">
  <label>URL Input Label</label>
  <input type="url" placeholder="URL Input placeholder" class="{{modifier_class}}"  >
</div>
<div class="form-field">
  <label>Textarea Label</label>
  <textarea class="{{modifier_class}}"   placeholder="Textarea placeholder"></textarea>
</div>

<div class="form-field">
  <label>Number Label</label>
  <input type="number" class="{{modifier_class}}"   placeholder="#" min="0" max="100">
</div>

<div class="form-field">
  <label>Date Label</label>
  <input type="date" class="{{modifier_class}}"  >
</div>
<div class="form-field">
  <label>Datetime Label</label>
  <input type="datetime-local" class="{{modifier_class}}"  >
</div>
<div class="form-field">
  <label>Month Label</label>
  <input type="month" class="{{modifier_class}}"  >
</div>
<div class="form-field">
  <label>Time Label</label>
  <input type="time" class="{{modifier_class}}"  >
</div>
<div class="form-field">
  <label>Week Label</label>
  <input type="week" class="{{modifier_class}}"  >
</div>

<div class="form-field">
  <label>Select Label</label>
  <select class="{{modifier_class}}"  >
    <option value="" disabled selected>Select One…</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
  </select>
</div>

<form>
  <fieldset class="form-field checks">
    <legend class="eyebrow">Legend for checkboxes:</legend>
    <div class="check">
      <input type="checkbox" id="c1" name="cb" checked>
      <label for="c1">Option One</label>
    </div>
    <div class="check">
      <input type="checkbox" id="c2" name="cb">
      <label for="c2">Option Two</label>
    </div>
    <div class="check">
      <input type="checkbox" id="c3" name="cb" checked disabled>
      <label for="c3">Option Three (disabled)</label>
    </div>
    <div class="check">
      <input type="checkbox" id="c4" name="cb" disabled>
      <label for="c4">Option Four (disabled)</label>
    </div>
  </fieldset>
</form>

<form>
  <fieldset class="form-field radios">
    <legend class="eyebrow">Legend for radios:</legend>
    <div class="radio">
      <input type="radio" id="r1" name="rad" checked>
      <label for="r1">Yes</label>
    </div>
    <div class="radio">
      <input type="radio" id="r2" name="rad">
      <label for="r2">No</label>
    </div>
    <div class="radio">
      <input type="radio" id="r3" name="radch" disabled>
      <label for="r3">Maybe so (disabled)</label>
    </div>
  </fieldset>
</form>

<div class="form-field">
  <label for="range-example">Range Label</label>
  <input type="range" id="range-example" class="{{modifier_class}}" oninput="this.nextElementSibling.value = this.value"  value="50" min="0" max="100">
  <output>50</output>
</div>

<fieldset class="is-required">
  <legend>Required fieldset legend</legend>
  <div class="form-field">
    <label for="req_fieldset_input">Field label</label>
    <input type="text" id="req_fieldset_input" placeholder="Text Input" required>
  </div>
</fieldset>
<fieldset>
  <legend>Fieldset legend</legend>
  <div class="form-field is-required">
    <label for="req_formfield_input">Required form-field label</label>
    <input type="text" id="req_formfield_input" placeholder="Required Text Input" required>
  </div>
</fieldset>
<fieldset class="form-field radios is-required">
  <legend class="eyebrow">Required Legend:</legend>
  <div class="radio">
    <input type="radio" id="req_ex_r1" name="req-radios" required>
    <label for="req_ex_r1">a radio label</label>
  </div>
  <div class="radio">
    <input type="radio" id="req_ex_r2" name="req-radios" required>
    <label for="req_ex_r2">another radio label</label>
  </div>
</fieldset>
<fieldset class="form-field checks is-required">
  <legend class="eyebrow">Required Legend:</legend>
  <div class="check">
    <input type="checkbox" id="req_ex_c1" name="req-checkboxes" required>
    <label for="req_ex_c1">a check label</label>
  </div>
</fieldset>

<form>
  <div class="form-field">
    <label for="test-full-name">Full Name</label>
    <input type="text" id="test-full-name" name="full-name" placeholder="Please enter your full name" required="" class="-validated -invalid" aria-describedby="test-full-name-error">
    <div class="error-message" id="test-full-name-error">Please fill out this field.</div>
  </div>
  <div class="form-field">
    <label for="test-email-address">Email Address</label>
    <input type="email" id="test-email-address" name="email-address" placeholder="Please enter your email address" required="" class="-validated -invalid" aria-describedby="test-email-address-error">
    <div class="error-message" id="test-email-address-error">Please fill out this field.</div>
  </div>
  <div class="form-field">
    <label for="test-select">Select</label>
    <select id="test-select" name="select" required="" class="-validated -invalid" aria-describedby="test-select-error">
      <option value="" disabled selected>Select One…</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <div class="error-message" id="test-select-error">Please select an option.</div>
  </div>
  <div class="form-field">
    <label for="test-message">Message</label>
    <textarea id="test-message" name="message" placeholder="Write your message here..." required="" class="-validated -invalid" aria-describedby="test-message-error"></textarea>
    <div class="error-message" id="test-message-error">Please fill out this field.</div>
  </div>
  <fieldset class="form-field radios" aria-describedby="test-updates-error">
    <legend>Sign me up for updates:</legend>
    <div class="error-message" id="test-updates-error">Please select one of these options.</div>
    <div class="radio">
      <input type="radio" id="test-updates-yes" value="yes" name="updates" required="" class="-validated -invalid">
      <label for="test-updates-yes">Yes</label>
    </div>
    <div class="radio">
      <input type="radio" id="test-updates-no" value="no" name="updates" class="-validated -invalid" aria-invalid="true">
      <label for="test-updates-no">No</label>
    </div>
    <div class="radio">
      <input type="radio" id="test-updates-maybe" value="maybe" name="updates" class="-validated -invalid" aria-invalid="true">
      <label for="test-updates-maybe">Maybe So</label>
    </div>
  </fieldset>
  <fieldset class="form-field checks" aria-describedby="test-terms-error">
    <legend>Agree to terms?</legend>
    <div class="error-message" id="test-terms-error">Please check this box if you want to proceed.</div>
    <div class="check">
      <input type="checkbox" id="test-terms-yes" value="yes" name="test-terms" required="" class="-validated -invalid">
      <label for="test-terms-yes">I agree to the terms &amp; conditions.</label>
    </div>
  </fieldset>
</form>

<div class="form-field is-required">
  <label>This is required</label>
</div>