Input elements

Label:

Focus:

Success:

Error:

Success disabled:

Error disabled:

HTML CSS

<div class="inputText">
  <label class="inputText__label" for="input1">Label: </label>
  <div class="inputText__fieldWrapper">
    <input
      class="inputText__field"
      id="input1"
      type="text"
      placeholder="Placeholder"
    />
    <svg
      class="inputText__icon inputText__icon_error"
      fill="none"
      width="24"
      height="24"
    >
      <use href="/library/svg-sprites.svg#success" />
    </svg>
    <svg
      class="inputText__icon inputText__icon_success"
      fill="none"
      width="24"
      height="24"
    >
      <use href="/library/svg-sprites.svg#error" />
    </svg>
  </div>
</div>

<div class="inputText">
  <label class="inputText__label" for="input2">Focus: </label>
  <div class="inputText__fieldWrapper">
    <input
      id="input2"
      class="inputText__field"
      type="text"
      placeholder="Placeholder"
      value="Filled text"
    />
    <svg
      class="inputText__icon inputText__icon_success"
      fill="none"
      width="24"
      height="24"
    >
      <use href="/library/svg-sprites.svg#success" />
    </svg>
    <svg
      class="inputText__icon inputText__icon_error"
      fill="none"
      width="24"
      height="24"
    >
      <use href="/library/svg-sprites.svg#error" />
    </svg>
  </div>
</div>

<div class="inputText">
  <label class="inputText__label" for="input3">Success: </label>
  <div class="inputText__fieldWrapper inputText_success">
    <input
      id="input3"
      class="inputText__field"
      type="text"
      placeholder="Placeholder"
      value="Success"
    />
    <svg
      class="inputText__icon inputText__icon_success"
      fill="none"
      width="24"
      height="24"
    >
      <use href="/library/svg-sprites.svg#success" />
    </svg>
    <svg
      class="inputText__icon inputText__icon_error"
      fill="none"
      width="24"
      height="24"
    >
      <use href="/library/svg-sprites.svg#error" />
    </svg>
  </div>
</div>

<div class="inputText">
  <label class="inputText__label" for="input4">Error: </label>
  <div class="inputText__fieldWrapper inputText_invalid">
    <input
      id="input4"
      class="inputText__field"
      type="text"
      placeholder="Placeholder"
      value="Error"
    />
    <svg
      class="inputText__icon inputText__icon_success"
      fill="none"
      width="24"
      height="24"
    >
      <use href="/library/svg-sprites.svg#success" />
    </svg>
    <svg
      class="inputText__icon inputText__icon_error"
      fill="none"
      width="24"
      height="24"
    >
      <use href="/library/svg-sprites.svg#error" />
    </svg>
  </div>
</div>
<div class="inputText">
  <label class="inputText__label" for="input6">Success disabled:</label>
  <div class="inputText__fieldWrapper inputText_success">
    <input
      id="input5"
      class="inputText__field"
      type="text"
      placeholder="Placeholder"
      value="Success disabled"
      disabled
    />
    <svg
      class="inputText__icon inputText__icon_success"
      fill="none"
      width="24"
      height="24"
    >
      <use href="/library/svg-sprites.svg#success" />
    </svg>
    <svg
      class="inputText__icon inputText__icon_error"
      fill="none"
      width="24"
      height="24"
    >
      <use href="/library/svg-sprites.svg#error" />
    </svg>
  </div>
</div>
<div class="inputText">
  <label class="inputText__label">Error disabled: </label>
  <div class="inputText__fieldWrapper inputText_invalid" for="input6">
    <input
      id="input6"
      class="inputText__field"
      type="text"
      placeholder="Placeholder"
      value="Error disabled"
      disabled
    />
    <svg
      class="inputText__icon inputText__icon_success"
      fill="none"
      width="24"
      height="24"
    >
      <use href="/library/svg-sprites.svg#success" />
    </svg>
    <svg
      class="inputText__icon inputText__icon_error"
      fill="none"
      width="24"
      height="24"
    >
      <use href="/library/svg-sprites.svg#error" />
    </svg>
  </div>
</div>

.inputText {
  display: inline-flex;
  flex-direction: column;
}

.inputText__label {
  color: var(--grey-3);

  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.48px;
  text-transform: uppercase;

  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}

.inputText__field {
  color: var(--grey-4);
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  border: 1px solid var(--grey-2);
  border-radius: 8px;

  padding: 17px 24px 13px 24px;

  transition: border 500ms linear;
}

.inputText__fieldWrapper {
  position: relative;
  display: inline-flex;
}

.inputText__icon {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  right: 16px;
  top: 16px;
}

.inputText__field::placeholder {
  color: var(--grey-2);
}

/* :focus */
.inputText__field:focus {
  border: 1px solid var(--success);
}

/* модификаторы */
.inputText_invalid .inputText__field:not(:disabled) {
  border-color: var(--error);
}
.inputText_success .inputText__field:not(:disabled) {
  border-color: var(--success);
}

.inputText_invalid .inputText__icon_error {
  visibility: visible;
  opacity: 1;
  color: var(--error);
}

.inputText_success .inputText__icon_success {
  visibility: visible;
  opacity: 1;
  color: var(--success);
}
/* :disabled */
.inputText__field:disabled,
.inputText__field:disabled ~ .inputText__icon {
  color: var(--grey-2);
}

.inputText_preview {
  margin-top: 15px;
}

.inputText_preview {
  /* transform: scale(0.5); */
}