InputField UI Elements

---
// InputField, recovered from blurr-components.pages.dev
---

<div class="preview-wrapper--centered"> <div style="display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:400px"> <div class="if if--md" data-component="input-field"> <label class="if__label" for="input-htwgm"> E-mailadres <span class="if__required" aria-hidden="true">*</span> </label> <div class="if__wrap">  <input id="input-htwgm" type="email" class="if__input" placeholder="naam@bedrijf.nl" required aria-describedby="input-htwgm-helper">   </div>  <p class="if__message" id="input-htwgm-helper">We sturen alleen relevante updates.</p> </div>   <div class="if if--md" data-component="input-field"> <label class="if__label" for="input-6vdyu"> Wachtwoord  </label> <div class="if__wrap">  <input id="input-6vdyu" type="password" class="if__input" placeholder="Minimaal 8 tekens">  <button type="button" class="if__toggle-pw" aria-label="Toon/verberg wachtwoord"> <svg class="if__pw-show" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path> <circle cx="12" cy="12" r="3"></circle> </svg> </button> </div>   </div> <script>
    document.querySelectorAll('[data-component="input-field"]').forEach(field => {
      const btn = field.querySelector<HTMLButtonElement>('.if__toggle-pw');
      const input = field.querySelector<HTMLInputElement>('.if__input');
      if (btn && input) {
        btn.addEventListener('click', () => {
          input.type = input.type === 'password' ? 'text' : 'password';
        });
      }
    });
  </script>  <div class="if if--md" data-component="input-field"> <label class="if__label" for="input-wknct"> Opmerkingen  </label> <div class="if__wrap">  <textarea id="input-wknct" class="if__input if__textarea" placeholder="Vertel ons meer..." rows="3"></textarea>   </div>   </div>   <div class="if if--md if--error" data-component="input-field"> <label class="if__label" for="input-cibwr"> Fout voorbeeld  </label> <div class="if__wrap">  <input id="input-cibwr" type="text" class="if__input" placeholder="Vul in..." value="fout" aria-invalid="true" aria-describedby="input-cibwr-error">   </div> <p class="if__message if__message--error" id="input-cibwr-error" role="alert">Dit veld is verplicht.</p>  </div>   </div> </div>

<style>
,:before,:after{box-sizing:border-box;margin:0;padding:0}
.preview-wrapper--centered{display:flex;align-items:center;justify-content:center;min-height:200px;padding:2rem;background:#f9f9fb}
</style>