Form field

The form field component (.form-field) is a layout wrapper that pairs a label, a control (an .input, .textarea, .select, or any other), and optional helper/error text into one consistently-spaced unit. It doesn't style the control itself — drop any control into .form-field-control and the label/helper styling applies uniformly.

We'll never share your email.

<div class="form-field">
  <label class="form-field-label" for="email">
    Email <span class="form-field-required" aria-hidden="true">*</span>
  </label>
  <div class="form-field-control">
    <label class="input">
      <input class="input-el" id="email" type="email" required>
    </label>
  </div>
  <div class="form-field-helper-row">
    <p class="form-field-helper">We'll never share your email.</p>
  </div>
</div>