@govbr-ds/core/dist/components/input/examples/input-states.html

Padrão Digital de Governo

<div class="col-sm-4 mb-3">
  <div class="br-input success">
    <label for="input-success">Label / Rótulo</label>
    <input id="input-success" type="text" placeholder="Digite somente números" aria-describedby="success"/><span class="feedback success" role="alert" id="success"><i class="fas fa-check-circle" aria-hidden="true"></i>Mensagem de Sucesso</span>
  </div>
</div>
<div class="col-sm-4 mb-3">
  <div class="br-input danger">
    <label for="input-danger">Label / Rótulo</label>
    <input id="input-danger" type="text" placeholder="Digite somente números" aria-describedby="danger"/><span class="feedback danger" role="alert" id="danger"><i class="fas fa-times-circle" aria-hidden="true"></i>Mensagem de Erro</span>
  </div>
</div>
<div class="col-sm-4 mb-3">
  <div class="br-input info">
    <label for="input-info">Label / Rótulo</label>
    <input id="input-info" type="text" placeholder="Digite somente números" aria-describedby="info"/><span class="feedback info" role="alert" id="info"><i class="fas fa-info-circle" aria-hidden="true"></i>Mensagem informativa</span>
  </div>
</div>
<div class="col-sm-4 mb-3">
  <div class="br-input warning">
    <label for="input-warning">Label / Rótulo</label>
    <input id="input-warning" type="text" placeholder="Digite somente números" aria-describedby="warning"/><span class="feedback warning" role="alert" id="warning"><i class="fas fa-exclamation-triangle" aria-hidden="true"></i>Mensagem de alerta</span>
  </div>
</div>
<div class="col-sm-4 mb-3">
  <div class="br-input">
    <label for="input-disabled">Label / Rótulo</label>
    <input id="input-disabled" type="text" placeholder="Digite somente números" aria-describedby="warning-des" disabled="disabled"/><span class="feedback warning" role="alert" id="warning-des"><i class="fas fa-exclamation-triangle" aria-hidden="true"></i>Campo Desabilitado</span>
  </div>
</div>