Input

Элемент input может быть как в форме так и отдельно от нее, для стилизации нужно добавить класс input.

Простой input

<form class="form" action="#">
  <div class="form__row">
    <label>Заголовок для input</label>
    <input class="input" placeholder="Простой Input" />
    <div class="error-text">Сообщение об ошибки</div>
  </div>
</form>

Анимированный input с иконками

<div class="form__row">
  <div class="input-placeholder">
    <i class="icon __left">search</i>
    <input class="input" type="text" placeholder="Имя" required>
    <label for="">
      Ваше имя
    </label>
    <i class="icon __right __hover">close</i>
  </div>
  <div class="error-text">Сообщение об ошибки</div>
</div>

input number

<div class="form__row">
  <div class="input-number">
    <button class="input-number__button" type="button" onclick="this.nextElementSibling.stepDown(); this.nextElementSibling.onchange();">remove</button>
    <input type="number" value="0">
    <button class="input-number__button" type="button" onclick="this.previousElementSibling.stepUp(); this.previousElementSibling.onchange();">add</button>
  </div>
</div>

input file

<div class="form__row">
  <input class="input-file" type="file">
</div>

Модификатор

--error - состояние ошибки

Демонстрация