Textinput

<div class="pkt-textinput">
  <label class="pkt-inputwrapper__label" for="exampleInputText1"
    >Textinput
    <input
      class="pkt-input"
      type="text"
      id="exampleInputText1"
      placeholder="Plassholder"
    />
  </label>
</div>

<div class="pkt-inputwrapper pkt-inputwrapper__helptext">
  <h2 class="pkt-inputwrapper__helptext-expandable-heading">
    Textinput med åpen expandable helptext<span
      class="pkt-tag pkt-tag--small pkt-tag--thin-text pkt-tag--beige"
      >Må fylles ut</span
    >
  </h2>
  <div class="pkt-inputwrapper__helptext-expandable">
    <button class="pkt-link pkt-link--icon-right">
      <span class="pkt-icon pkt-btn__icon">
        <svg viewBox="0 0 32 32">
          <use href="#chevron-thin-down"></use>
        </svg>
      </span>
      <span class="pkt-btn__text"
        >Les mer <span class="pkt-sr-only">om inputfeltet</span></span
      >
    </button>
    <div
      class="pkt-inputwrapper__helptext pkt-inputwrapper__helptext-expandable-open"
    >
      Bruk dette tekstfeltet til å skrive mer informasjon om inputfeltet.
    </div>
  </div>
  <label class="pkt-sr-only" for="exampleInputText2"
    >Visuelt skjult label</label
  >
  <div class="pkt-input__container">
    <input
      class="pkt-input"
      type="text"
      id="exampleInputText2"
      placeholder="Plassholder"
    />
    <div class="pkt-input-icon">
      <span class="pkt-icon">
        <svg viewBox="0 0 32 32">
          <use href="#close"></use>
        </svg>
      </span>
    </div>
  </div>
</div>

<div class="pkt-inputwrapper mb-size-24 pkt-inputwrapper--error">
  <label class="pkt-inputwrapper__label" for="exampleInputText3"
    >Textinput med error
    <div class="pkt-inputwrapper__helptext">
      Dette er tekst over tekstfeltet.
    </div>
    <div class="pkt-input__container">
      <input
        class="pkt-input"
        type="text"
        id="exampleInputText3"
        placeholder="Plassholder"
      />
      <p class="pkt-input-suffix">
        Suffix
        <span class="pkt-icon pkt-input__input-suffix-icon">
          <svg viewBox="0 0 32 32">
            <use href="#close"></use>
          </svg>
        </span>
      </p>
    </div>
  </label>
  <div
    class="pkt-alert pkt-alert--error pkt-alert--compact"
    aria-live="assertive"
  >
    <span class="pkt-icon pkt-alert__icon">
      <svg viewBox="0 0 32 32" aria-hidden="true">
        <use href="#alert-error"></use>
      </svg>
    </span>
    <div class="pkt-alert__text">Dette er en feilmelding</div>
  </div>
</div>