Inputs

<div class="space-y-6">
  <div class="input--text">
    <label for="input-default" class="input__label"> Input default</label>
    <div class="input__message">Explanation about how to fill in the field.</div>
    <div class="input-field">
      <input type="text" id="input-default" name="input-default" placeholder="Type something" />
    </div>
  </div>
  <div class="input--text">
    <label for="input-default" class="input__label"> Input default success</label>
    <div class="input__message">Explanation about how to fill in the field.</div>
    <div class="input-field" data-validation="success">
      <input type="text" id="input-default" name="input-default" value="Correct value" />
    </div>
    <div class="input__message" data-variant="success">Dit veld is verplicht</div>
  </div>
  <div class="input--text">
    <label for="input-default" class="input__label"> Input default error</label>
    <div class="input__message">Explanation about how to fill in the field.</div>
    <div class="input-field" data-validation="error">
      <input type="text" id="input-default" name="input-default" value="Incorrect value" />
    </div>
    <div class="input__message" data-variant="error">Dit veld is verplicht</div>
  </div>
</div>

<div class="space-y-6">
  <div class="input--text" x-data="{passwordHidden: true}">
    <label for="input-default" class="input__label">Input Before</label>
    <div class="input-field">
      <button class="input-field__before" type="button" @click="passwordHidden = !passwordHidden">
        <span x-show="passwordHidden"
          ><svg class="aspect-square w-4 text-grey-700" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
            <!-- SVG content -->
          </svg>
        </span>
        <span x-show="!passwordHidden"
          ><svg class="aspect-square w-4 text-grey-700" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
            <!-- SVG content -->
          </svg>
        </span>
        <span class="sr-only">Toggle password visibility</span>
      </button>
      <input
        type="password"
        :type="passwordHidden ? 'password' : 'text'"
        id="input-default"
        name="input-default"
        placeholder="Type something"
        value="wachtwoord"
      />
    </div>
    <div class="input__message">Password must contain at least 12 chars and 1 special char</div>
  </div>
</div>

<div class="space-y-6">
  <div class="input--text">
    <label for="input-default" class="input__label">Input After</label>
    <div class="input-field" data-validation="success">
      <input type="text" id="input-default" name="input-default" placeholder="Type something" />
      <button class="input-field__after">
        <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="aspect-square w-4 text-blue-900">
          <!-- SVG content -->
        </svg>
      </button>
    </div>
  </div>
</div>

<div class="space-y-6">
  <div class="input--text">
    <label for="input-default" class="input__label">Input Before and After</label>
    <div class="input-field">
      <div class="input-field__before | text-tag uppercase text-grey-700">Tel:</div>
      <input type="tel" id="input-default" name="input-default" placeholder="Type something" />
      <button class="input-field__after">
        <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="aspect-square w-4 text-grey-700">
          <!-- SVG content -->
        </svg>
        <span class="sr-only">Zoeken</span>
      </button>
    </div>
  </div>
</div>