@ussebastian/kitdigital/docs/components/forms/input-states.html

Kit Digital de la Universidad San Sebastián

<form class="uss-form">
  <div class="uss-form-group mb-40">
    <label for="inputExample" class="uss-form__label">
      Label normal
      <i class="uss-icon ri-question-line"></i>
    </label>
    <input type="email" class="uss-form__input" id="inputExample" aria-describedby="inputExample" />
    <div class="uss-form__help">Mensaje de contexto.</div>
  </div>
  <div class="uss-form-group mb-40 uss-form-group--success">
    <label for="inputExample" class="uss-form__label"> Label </label>
    <input type="email" class="uss-form__input" id="inputExample" aria-describedby="inputExample" />
    <div class="uss-form__help">
      <i class="uss-icon ri-checkbox-circle-line"></i>
      Mensaje de contexto.
    </div>
  </div>
  <div class="uss-form-group mb-40 uss-form-group--warning">
    <label for="inputExample" class="uss-form__label"> Label </label>
    <input type="email" class="uss-form__input" id="inputExample" aria-describedby="inputExample" />
    <div class="uss-form__help">
      <i class="uss-icon ri-alert-line"></i>
      Mensaje de contexto.
    </div>
  </div>
  <div class="uss-form-group mb-40 uss-form-group--error">
    <label for="inputExample" class="uss-form__label"> Label </label>
    <input type="email" class="uss-form__input" id="inputExample" aria-describedby="inputExample" />
    <div class="uss-form__help">
      <i class="uss-icon ri-question-line"></i>
      Mensaje de contexto.
    </div>
  </div>
  <div class="uss-form-group mb-40 uss-form-group--disabled">
    <label for="inputExample" class="uss-form__label"> Label disabled </label>
    <input
      type="email"
      class="uss-form__input"
      value="texto disabled"
      id="inputExample"
      aria-describedby="inputExample"
    />
    <div class="uss-form__help">Mensaje de contexto.</div>
  </div>
</form>