<div class="field" style="max-width:360px">
  <label for="f-email">Work email</label>
  <input class="input" id="f-email" type="email" placeholder="name@novustech.com.sg">
  <span class="field__help">We reply within one business day.</span>
</div>

Market

Message

Select and textarea

<div style="max-width:360px">
  <div class="field">
    <label for="f-market">Market</label>
    <select class="select" id="f-market">
      <option>Singapore</option>
      <option>Philippines</option>
      <option>Sri Lanka</option>
      <option>Indonesia</option>
    </select>
  </div>
  <div class="field">
    <label for="f-msg">Message</label>
    <textarea class="textarea" id="f-msg" rows="3"></textarea>
  </div>
</div>

Organisation Organisation is required.

Error state

<div class="field field--error" style="max-width:360px">
  <label for="f-org">Organisation</label>
  <input class="input" id="f-org" type="text" aria-invalid="true">
  <span class="field__error">Organisation is required.</span>
</div>

Usage

Every input has a real <label>; help and error lines are part of the field block.
Focus shows the accent border plus the token focus ring, never remove the visible focus state.
Touch targets stay ≥ 44px on mobile.

Lead form & CTA row ›