Input

Input de texto básico

Preview

HTML

<div class="input__container">
   <label class="input__label">Label</label>
   <input class="input__box" type="text" name="input-text" id="input-text" placeholder="example" />
</div>


<!-- Para deixar o input como inválido (borda vermelha) adicione a classe 'invalid' na tag <input>.
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <label class="input__label">Label</label>
   <input class="input__box invalid" type="text" name="input-text" id="input-text" placeholder="example" />
</div>

-->

<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <label class="input__label">Label</label>
   <input class="input__box" type="text" name="input-text" id="input-text" placeholder="example" disabled/>
</div>

-->

CSS

.input__container{
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__label{
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
}

.input__box{
  width: 100%;
  height: 44px;
  padding: 8px 12px;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
  outline: none;
}

.input__box::placeholder{
  font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    color: #757575;
}

.input__box:hover{
  border-color: #A7A7A7;
}

.input__box:focus{
  border: 1.5px solid #01141E;
}

.input__box:not(:placeholder-shown):not(:focus) {
  border-color: #434343;
}

.input__box.invalid{
  border: 1px solid #FF3939;
}

.input__box.invalid:focus {
  border: 1.5px solid #FF3939;
}

.input__box.invalid:not(:placeholder-shown):not(:focus) {
  border-color: #FF3939;
}

.input__box:disabled{
  cursor: not-allowed;
  background-color: #F5F5F5;
}

Input de texto com informação

Preview

HTML

<div class="input__container">
   <label class="input__label">Label</label>
   <input class="input__box" type="text" name="input-text" id="input-text" placeholder="example" />
   <span class="input__info">Information message</span>
</div>


<!-- Para deixar o input como inválido (borda vermelha) adicione a classe 'invalid' na tag <input>.
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <label class="input__label">Label</label>
   <input class="input__box invalid" type="text" name="input-text" id="input-text" placeholder="example" />
   <span class="input__info">Information message</span>
</div>

-->

<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <label class="input__label">Label</label>
   <input class="input__box" type="text" name="input-text" id="input-text" placeholder="example" disabled/>
   <span class="input__info">Information message</span>
</div>

-->

CSS

.input__container{
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__label{
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
}

.input__box{
  width: 100%;
  height: 44px;
  padding: 8px 12px;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
  outline: none;
}

.input__box::placeholder{
  font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    color: #757575;
}

.input__box:hover{
  border-color: #A7A7A7;
}

.input__box:focus{
  border: 1.5px solid #01141E;
}

.input__box:not(:placeholder-shown):not(:focus) {
  border-color: #434343;
}

.input__info{
  font-size: 12px;
  line-height: 16.8px;
  font-weight: 400;
  color: #757575;
}

.input__box.invalid{
  border: 1px solid #FF3939;
}

.input__box.invalid:focus {
  border: 1.5px solid #FF3939;
}

.input__box.invalid:not(:placeholder-shown):not(:focus) {
  border-color: #FF3939;
}

.input__box.invalid + .input__info{
  color: #FF3939!important;
}

.input__box:disabled{
  cursor: not-allowed;
  background-color: #F5F5F5;
}

Input de texto com ícone de busca e mensagem de erro

Preview

HTML

<div class="input__container">
   <label class="input__label">Label</label>
   <div class="input__box">
      <input type="text" name="input-text" id="input-text" placeholder="example" />
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M12.0207 11.078L14.876 13.9327L13.9327 14.876L11.078 12.0207C10.0158 12.8722 8.69467 13.3353 7.33334 13.3334C4.02134 13.3334 1.33334 10.6454 1.33334 7.33337C1.33334 4.02137 4.02134 1.33337 7.33334 1.33337C10.6453 1.33337 13.3333 4.02137 13.3333 7.33337C13.3353 8.69471 12.8722 10.0159 12.0207 11.078ZM10.6833 10.5834C11.5294 9.7133 12.0019 8.54699 12 7.33337C12 4.75471 9.91134 2.66671 7.33334 2.66671C4.75467 2.66671 2.66667 4.75471 2.66667 7.33337C2.66667 9.91137 4.75467 12 7.33334 12C8.54696 12.002 9.71326 11.5294 10.5833 10.6834L10.6833 10.5834Z" fill="black"/>
      </svg>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>


<!-- Para deixar o input como inválido (borda vermelha e mensagem) adicione a classe 'invalid' na tag <div> juntamente com a classe "input__box".
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <label class="input__label">Label</label>
   <div class="input__box invalid">
      <input type="text" name="input-text" id="input-text" placeholder="example" />
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M12.0207 11.078L14.876 13.9327L13.9327 14.876L11.078 12.0207C10.0158 12.8722 8.69467 13.3353 7.33334 13.3334C4.02134 13.3334 1.33334 10.6454 1.33334 7.33337C1.33334 4.02137 4.02134 1.33337 7.33334 1.33337C10.6453 1.33337 13.3333 4.02137 13.3333 7.33337C13.3353 8.69471 12.8722 10.0159 12.0207 11.078ZM10.6833 10.5834C11.5294 9.7133 12.0019 8.54699 12 7.33337C12 4.75471 9.91134 2.66671 7.33334 2.66671C4.75467 2.66671 2.66667 4.75471 2.66667 7.33337C2.66667 9.91137 4.75467 12 7.33334 12C8.54696 12.002 9.71326 11.5294 10.5833 10.6834L10.6833 10.5834Z" fill="black"/>
      </svg>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->

<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <label class="input__label">Label</label>
   <div class="input__box">
      <input type="text" name="input-text" id="input-text" placeholder="example" disabled/>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M12.0207 11.078L14.876 13.9327L13.9327 14.876L11.078 12.0207C10.0158 12.8722 8.69467 13.3353 7.33334 13.3334C4.02134 13.3334 1.33334 10.6454 1.33334 7.33337C1.33334 4.02137 4.02134 1.33337 7.33334 1.33337C10.6453 1.33337 13.3333 4.02137 13.3333 7.33337C13.3353 8.69471 12.8722 10.0159 12.0207 11.078ZM10.6833 10.5834C11.5294 9.7133 12.0019 8.54699 12 7.33337C12 4.75471 9.91134 2.66671 7.33334 2.66671C4.75467 2.66671 2.66667 4.75471 2.66667 7.33337C2.66667 9.91137 4.75467 12 7.33334 12C8.54696 12.002 9.71326 11.5294 10.5833 10.6834L10.6833 10.5834Z" fill="black"/>
      </svg>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__label {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
}

.input__box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  background-color: #fff;
  width: 100%;
  height: 44px;
  border-radius: 4px;
}

.input__box svg {
  position: absolute;
  left: 12px;
  top: 14px;
  z-index: 2;
}

.input__box input {
  width: 100%;
  height: 100%;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  padding: 8px 12px 8px 36px;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
  outline: none;
}

.input__box input::placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #757575;
}

.input__box:hover input {
  border-color: #A7A7A7;
}

.input__box input:focus {
  border: 1.5px solid #01141E;
}

.input__box input:not(:placeholder-shown):not(:focus) {
  border-color: #434343;
}

.input__info-invalid {
  font-size: 12px;
  line-height: 16.8px;
  font-weight: 400;
  color: #FF3939;
  display: none;
}

.input__box.invalid+.input__info-invalid {
  display: block;
}

.input__box.invalid input {
  border: 1px solid #FF3939;
}

.input__box.invalid input:focus {
  border: 1.5px solid #FF3939;
}

.input__box.invalid input:not(:placeholder-shown):not(:focus) {
  border-color: #FF3939;
}

.input__box input:disabled {
  cursor: not-allowed;
  background-color: #F5F5F5;
}

.input__box input:disabled + svg {
  cursor: not-allowed;
}

.input__box input:disabled + svg path {
  fill: #8E8E8E;
}

Input de texto com ícone de informações e mensagem de erro

Preview

HTML

<div class="input__container">
   <label class="input__label">Label</label>
   <div class="input__box">
      <input type="text" name="input-text" id="input-text" placeholder="example" />
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>


<!-- Para deixar o input como inválido (borda vermelha e mensagem) adicione a classe 'invalid' na tag <div> juntamente com a classe "input__box".
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <label class="input__label">Label</label>
   <div class="input__box invalid">
      <input type="text" name="input-text" id="input-text" placeholder="example" />
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->

<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <label class="input__label">Label</label>
   <div class="input__box">
      <input type="text" name="input-text" id="input-text" placeholder="example" disabled/>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__label {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
}

.input__box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  background-color: #fff;
  width: 100%;
  height: 44px;
  border-radius: 4px;
}

.input__box svg {
  position: absolute;
  right: 12px;
  top: 14px;
  z-index: 2;
}

.input__box input {
  width: 100%;
  height: 100%;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  padding: 8px 36px 8px 12px;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
  outline: none;
}

.input__box input::placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #757575;
}

.input__box:hover input {
  border-color: #A7A7A7;
}

.input__box input:focus {
  border: 1.5px solid #01141E;
}

.input__box input:not(:placeholder-shown):not(:focus) {
  border-color: #434343;
}

.input__info-invalid {
  font-size: 12px;
  line-height: 16.8px;
  font-weight: 400;
  color: #FF3939;
  display: none;
}

.input__box.invalid+.input__info-invalid {
  display: block;
}

.input__box.invalid input {
  border: 1px solid #FF3939;
}

.input__box.invalid input:focus {
  border: 1.5px solid #FF3939;
}

.input__box.invalid input:not(:placeholder-shown):not(:focus) {
  border-color: #FF3939;
}

.input__box input:disabled {
  cursor: not-allowed;
  background-color: #F5F5F5;
}

.input__box input:disabled + svg {
  cursor: not-allowed;
}

.input__box input:disabled + svg path {
  fill: #8E8E8E;
}

Input de texto com ícones (busca e informações) e mensagem de erro

Preview

HTML

<div class="input__container">
   <label class="input__label">Label</label>
   <div class="input__box">
      <input type="text" name="input-text" id="input-text" placeholder="example" />
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M12.0207 11.078L14.876 13.9327L13.9327 14.876L11.078 12.0207C10.0158 12.8722 8.69467 13.3353 7.33334 13.3334C4.02134 13.3334 1.33334 10.6454 1.33334 7.33337C1.33334 4.02137 4.02134 1.33337 7.33334 1.33337C10.6453 1.33337 13.3333 4.02137 13.3333 7.33337C13.3353 8.69471 12.8722 10.0159 12.0207 11.078ZM10.6833 10.5834C11.5294 9.7133 12.0019 8.54699 12 7.33337C12 4.75471 9.91134 2.66671 7.33334 2.66671C4.75467 2.66671 2.66667 4.75471 2.66667 7.33337C2.66667 9.91137 4.75467 12 7.33334 12C8.54696 12.002 9.71326 11.5294 10.5833 10.6834L10.6833 10.5834Z" fill="black"/>
      </svg>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>


<!-- Para deixar o input como inválido (borda vermelha e mensagem) adicione a classe 'invalid' na tag <div> juntamente com a classe "input__box".
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <label class="input__label">Label</label>
   <div class="input__box invalid">
      <input type="text" name="input-text" id="input-text" placeholder="example" />
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M12.0207 11.078L14.876 13.9327L13.9327 14.876L11.078 12.0207C10.0158 12.8722 8.69467 13.3353 7.33334 13.3334C4.02134 13.3334 1.33334 10.6454 1.33334 7.33337C1.33334 4.02137 4.02134 1.33337 7.33334 1.33337C10.6453 1.33337 13.3333 4.02137 13.3333 7.33337C13.3353 8.69471 12.8722 10.0159 12.0207 11.078ZM10.6833 10.5834C11.5294 9.7133 12.0019 8.54699 12 7.33337C12 4.75471 9.91134 2.66671 7.33334 2.66671C4.75467 2.66671 2.66667 4.75471 2.66667 7.33337C2.66667 9.91137 4.75467 12 7.33334 12C8.54696 12.002 9.71326 11.5294 10.5833 10.6834L10.6833 10.5834Z" fill="black"/>
      </svg>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->

<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <label class="input__label">Label</label>
   <div class="input__box">
      <input type="text" name="input-text" id="input-text" placeholder="example" disabled/>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M12.0207 11.078L14.876 13.9327L13.9327 14.876L11.078 12.0207C10.0158 12.8722 8.69467 13.3353 7.33334 13.3334C4.02134 13.3334 1.33334 10.6454 1.33334 7.33337C1.33334 4.02137 4.02134 1.33337 7.33334 1.33337C10.6453 1.33337 13.3333 4.02137 13.3333 7.33337C13.3353 8.69471 12.8722 10.0159 12.0207 11.078ZM10.6833 10.5834C11.5294 9.7133 12.0019 8.54699 12 7.33337C12 4.75471 9.91134 2.66671 7.33334 2.66671C4.75467 2.66671 2.66667 4.75471 2.66667 7.33337C2.66667 9.91137 4.75467 12 7.33334 12C8.54696 12.002 9.71326 11.5294 10.5833 10.6834L10.6833 10.5834Z" fill="black"/>
      </svg>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__label {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
}

.input__box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  background-color: #fff;
  width: 100%;
  height: 44px;
  border-radius: 4px;
}

.input__box svg:first-of-type {
  position: absolute;
  left: 12px;
  top: 14px;
  z-index: 2;
}

.input__box svg:nth-of-type(2) {
  position: absolute;
  right: 12px;
  top: 14px;
  z-index: 2;
}

.input__box input {
  width: 100%;
  height: 100%;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  padding: 8px 36px 8px 36px;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
  outline: none;
}

.input__box input::placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #757575;
}

.input__box:hover input {
  border-color: #A7A7A7;
}

.input__box input:focus {
  border: 1.5px solid #01141E;
}

.input__box input:not(:placeholder-shown):not(:focus) {
  border-color: #434343;
}

.input__info-invalid {
  font-size: 12px;
  line-height: 16.8px;
  font-weight: 400;
  color: #FF3939;
  display: none;
}

.input__box.invalid+.input__info-invalid {
  display: block;
}

.input__box.invalid input {
  border: 1px solid #FF3939;
}

.input__box.invalid input:focus {
  border: 1.5px solid #FF3939;
}

.input__box.invalid input:not(:placeholder-shown):not(:focus) {
  border-color: #FF3939;
}

.input__box input:disabled {
  cursor: not-allowed;
  background-color: #F5F5F5;
}

.input__box input:disabled ~ svg {
  cursor: not-allowed;
}

.input__box input:disabled ~ svg path {
  fill: #8E8E8E;
}

Input de texto secundário

Preview

HTML

<div class="input__container">
   <div class="input__box">
      <input type="text" name="input-text" id="input-text" placeholder="example"/>
      <label class="input__label" for="input-text">
         <span>Label</span>
      </label>
   </div>
</div>


<!-- Para deixar o input como inválido (borda vermelha) adicione a classe 'invalid' na tag <div> juntamente com a classe "input__box".
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <div class="input__box invalid">
      <input type="text" name="input-text" id="input-text" placeholder="example"/>
      <label class="input__label" for="input-text">
         <span>Label</span>
      </label>
   </div>
</div>

-->


<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <div class="input__box">
      <input type="text" name="input-text" id="input-text" placeholder="example" disabled/>
      <label class="input__label" for="input-text">
         <span>Label</span>
      </label>
   </div>
</div>

-->

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__box {
  width: 100%;
  height: 56px;
  border-radius: 4px;
  position: relative;
}

.input__box input{
  width: calc(100% - 32px);
  height: 20px;
  position: absolute;
  left: 16px;
  bottom: 9.5px;
  z-index: 2;
  border: none;
  outline: none;
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 400;
  color: #2C2C2C;
}

.input__label {
  width: 100%;
  height: 56px;
  background-color: white;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  cursor: text;
  position: absolute;
  top: 0;
  left: 0;
}

.input__label span{
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
  position: absolute;
  z-index: 3;
  left: 16px;
  top: 18px;
  transition: all linear 0.5s;
}

.input__box input:focus + .input__label span,
.input__box input:not(:placeholder-shown) + .input__label span{
  font-size: 12px;
  line-height: 16.8px;
  color: #8E8E8E;
  top: 9.5px;
}

.input__box:hover .input__label{
  border-color: #A7A7A7;
}

.input__box input:focus + .input__label {
  border: 1px solid #01141E;
}

.input__box input::placeholder{
  opacity: 0;
}

.input__box input:not(:placeholder-shown):not(:focus) + .input__label {
  border-color: #A7A7A7;
}

.input__box.invalid .input__label{
  border: 1px solid #FF3939;
}

.input__box.invalid input:focus + .input__label{
  border: 1px solid #FF3939;
}

.input__box.invalid input:not(:focus) + .input__label{
  border-color: #FF3939;
}

.input__box input:disabled + .input__label,
.input__box input:disabled{
  cursor: not-allowed;
  background-color: #F5F5F5;
}

Input de texto secundário com informação

Preview

HTML

<div class="input__container">
   <div class="input__box">
      <input type="text" name="input-text" id="input-text" placeholder="example"/>
      <label class="input__label" for="input-text">
         <span>Label</span>
      </label>
   </div>
   <span class="input__info">Information message</span>
</div>


<!-- Para deixar o input como inválido (borda vermelha) adicione a classe 'invalid' na tag <div> juntamente com a classe "input__box".
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <div class="input__box invalid">
      <input type="text" name="input-text" id="input-text" placeholder="example"/>
      <label class="input__label" for="input-text">
         <span>Label</span>
      </label>
   </div>
   <span class="input__info">Information message</span>
</div>

-->


<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <div class="input__box">
      <input type="text" name="input-text" id="input-text" placeholder="example" disabled/>
      <label class="input__label" for="input-text">
         <span>Label</span>
      </label>
   </div>
   <span class="input__info">Information message</span>
</div>

-->

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__box {
  width: 100%;
  height: 56px;
  border-radius: 4px;
  position: relative;
}

.input__box input{
  width: calc(100% - 32px);
  height: 20px;
  position: absolute;
  left: 16px;
  bottom: 9.5px;
  z-index: 2;
  border: none;
  outline: none;
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 400;
  color: #2C2C2C;
}

.input__label {
  width: 100%;
  height: 56px;
  background-color: white;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  cursor: text;
  position: absolute;
  top: 0;
  left: 0;
}

.input__label span{
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
  position: absolute;
  z-index: 3;
  left: 16px;
  top: 18px;
  transition: all linear 0.5s;
}

.input__box input:focus + .input__label span,
.input__box input:not(:placeholder-shown) + .input__label span{
  font-size: 12px;
  line-height: 16.8px;
  color: #8E8E8E;
  top: 9.5px;
}

.input__box:hover .input__label{
  border-color: #A7A7A7;
}

.input__box input:focus + .input__label {
  border: 1px solid #01141E;
}

.input__box input::placeholder{
  opacity: 0;
}

.input__info {
  font-size: 12px;
  line-height: 16.8px;
  font-weight: 400;
  color: #757575;
}

.input__box input:not(:placeholder-shown):not(:focus) + .input__label {
  border-color: #A7A7A7;
}

.input__box.invalid .input__label{
  border: 1px solid #FF3939;
}

.input__box.invalid input:focus + .input__label{
  border: 1px solid #FF3939;
}

.input__box.invalid input:not(:focus) + .input__label{
  border-color: #FF3939;
}

.input__box.invalid+.input__info {
  color: #FF3939 !important;
}

.input__box input:disabled + .input__label,
.input__box input:disabled{
  cursor: not-allowed;
  background-color: #F5F5F5;
}

Input de texto secundário com ícone de busca e mensagem de erro

Preview

HTML

<div class="input__container">
   <div class="input__box">
      <input type="text" name="input-text" id="input-text" placeholder="example"/>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M12.0207 11.078L14.876 13.9327L13.9327 14.876L11.078 12.0207C10.0158 12.8722 8.69467 13.3353 7.33334 13.3334C4.02134 13.3334 1.33334 10.6454 1.33334 7.33337C1.33334 4.02137 4.02134 1.33337 7.33334 1.33337C10.6453 1.33337 13.3333 4.02137 13.3333 7.33337C13.3353 8.69471 12.8722 10.0159 12.0207 11.078ZM10.6833 10.5834C11.5294 9.7133 12.0019 8.54699 12 7.33337C12 4.75471 9.91134 2.66671 7.33334 2.66671C4.75467 2.66671 2.66667 4.75471 2.66667 7.33337C2.66667 9.91137 4.75467 12 7.33334 12C8.54696 12.002 9.71326 11.5294 10.5833 10.6834L10.6833 10.5834Z" fill="black"/>
      </svg>
      <label class="input__label" for="input-text">
         <span>Label</span>
      </label>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>


<!-- Para deixar o input como inválido (borda vermelha e mensagem) adicione a classe 'invalid' na tag <div> juntamente com a classe "input__box".
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <div class="input__box invalid">
      <input type="text" name="input-text" id="input-text" placeholder="example"/>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M12.0207 11.078L14.876 13.9327L13.9327 14.876L11.078 12.0207C10.0158 12.8722 8.69467 13.3353 7.33334 13.3334C4.02134 13.3334 1.33334 10.6454 1.33334 7.33337C1.33334 4.02137 4.02134 1.33337 7.33334 1.33337C10.6453 1.33337 13.3333 4.02137 13.3333 7.33337C13.3353 8.69471 12.8722 10.0159 12.0207 11.078ZM10.6833 10.5834C11.5294 9.7133 12.0019 8.54699 12 7.33337C12 4.75471 9.91134 2.66671 7.33334 2.66671C4.75467 2.66671 2.66667 4.75471 2.66667 7.33337C2.66667 9.91137 4.75467 12 7.33334 12C8.54696 12.002 9.71326 11.5294 10.5833 10.6834L10.6833 10.5834Z" fill="black"/>
      </svg>
      <label class="input__label" for="input-text">
         <span>Label</span>
      </label>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->


<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <div class="input__box">
      <input type="text" name="input-text" id="input-text" placeholder="example" disabled/>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M12.0207 11.078L14.876 13.9327L13.9327 14.876L11.078 12.0207C10.0158 12.8722 8.69467 13.3353 7.33334 13.3334C4.02134 13.3334 1.33334 10.6454 1.33334 7.33337C1.33334 4.02137 4.02134 1.33337 7.33334 1.33337C10.6453 1.33337 13.3333 4.02137 13.3333 7.33337C13.3353 8.69471 12.8722 10.0159 12.0207 11.078ZM10.6833 10.5834C11.5294 9.7133 12.0019 8.54699 12 7.33337C12 4.75471 9.91134 2.66671 7.33334 2.66671C4.75467 2.66671 2.66667 4.75471 2.66667 7.33337C2.66667 9.91137 4.75467 12 7.33334 12C8.54696 12.002 9.71326 11.5294 10.5833 10.6834L10.6833 10.5834Z" fill="black"/>
      </svg>
      <label class="input__label" for="input-text">
         <span>Label</span>
      </label>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__box {
  width: 100%;
  height: 56px;
  border-radius: 4px;
  position: relative;
}

.input__box input{
  width: calc(100% - 60px);
  height: 20px;
  position: absolute;
  left: 44px;
  bottom: 9.5px;
  z-index: 2;
  border: none;
  outline: none;
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 400;
  color: #2C2C2C;
}

.input__box svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.input__label {
  width: 100%;
  height: 56px;
  background-color: white;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  cursor: text;
  position: absolute;
  top: 0;
  left: 0;
}

.input__label span{
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
  position: absolute;
  z-index: 3;
  left: 44px;
  top: 18px;
  transition: all linear 0.5s;
}

.input__box input:focus ~ .input__label span,
.input__box input:not(:placeholder-shown) ~ .input__label span{
  font-size: 12px;
  line-height: 16.8px;
  color: #8E8E8E;
  top: 9.5px;
}

.input__box:hover .input__label{
  border-color: #A7A7A7;
}

.input__box input:focus ~ .input__label {
  border: 1px solid #01141E;
}

.input__box input::placeholder{
  opacity: 0;
}

.input__box input:not(:placeholder-shown):not(:focus) ~ .input__label {
  border-color: #A7A7A7;
}

.input__info-invalid {
  font-size: 12px;
  line-height: 16.8px;
  font-weight: 400;
  color: #FF3939;
  display: none;
}

.input__box.invalid + .input__info-invalid {
  display: block;
}

.input__box.invalid .input__label{
  border: 1px solid #FF3939;
}

.input__box.invalid input:focus ~ .input__label{
  border: 1px solid #FF3939;
}

.input__box.invalid input:not(:focus) ~ .input__label{
  border-color: #FF3939;
}

.input__box input:disabled ~ .input__label,
.input__box input:disabled~.input__label span,
.input__box input:disabled{
  cursor: not-allowed;
  color: #8E8E8E;
  background-color: #F5F5F5;
}

.input__box input:disabled + svg {
  cursor: not-allowed;
}

.input__box input:disabled + svg path {
  fill: #8E8E8E;
}

Input de texto secundário com ícone de informações e mensagem de erro

Preview

HTML

<div class="input__container">
   <div class="input__box">
      <input type="text" name="input-text" id="input-text" placeholder="example"/>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
      <label class="input__label" for="input-text">
         <span>Label</span>
      </label>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>


<!-- Para deixar o input como inválido (borda vermelha e mensagem) adicione a classe 'invalid' na tag <div> juntamente com a classe "input__box".
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <div class="input__box invalid">
      <input type="text" name="input-text" id="input-text" placeholder="example"/>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
      <label class="input__label" for="input-text">
         <span>Label</span>
      </label>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->


<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <div class="input__box">
      <input type="text" name="input-text" id="input-text" placeholder="example" disabled/>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
      <label class="input__label" for="input-text">
         <span>Label</span>
      </label>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__box {
  width: 100%;
  height: 56px;
  border-radius: 4px;
  position: relative;
}

.input__box input{
  width: calc(100% - 60px);
  height: 20px;
  position: absolute;
  left: 16px;
  bottom: 9.5px;
  z-index: 2;
  border: none;
  outline: none;
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 400;
  color: #2C2C2C;
}

.input__box svg {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.input__label {
  width: 100%;
  height: 56px;
  background-color: white;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  cursor: text;
  position: absolute;
  top: 0;
  left: 0;
}

.input__label span{
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
  position: absolute;
  z-index: 3;
  left: 16px;
  top: 18px;
  transition: all linear 0.5s;
}

.input__box input:focus ~ .input__label span,
.input__box input:not(:placeholder-shown) ~ .input__label span{
  font-size: 12px;
  line-height: 16.8px;
  color: #8E8E8E;
  top: 9.5px;
}

.input__box:hover .input__label{
  border-color: #A7A7A7;
}

.input__box input:focus ~ .input__label {
  border: 1px solid #01141E;
}

.input__box input::placeholder{
  opacity: 0;
}

.input__box input:not(:placeholder-shown):not(:focus) ~ .input__label {
  border-color: #A7A7A7;
}

.input__info-invalid {
  font-size: 12px;
  line-height: 16.8px;
  font-weight: 400;
  color: #FF3939;
  display: none;
}

.input__box.invalid + .input__info-invalid {
  display: block;
}

.input__box.invalid .input__label{
  border: 1px solid #FF3939;
}

.input__box.invalid input:focus ~ .input__label{
  border: 1px solid #FF3939;
}

.input__box.invalid input:not(:focus) ~ .input__label{
  border-color: #FF3939;
}

.input__box input:disabled ~ .input__label,
.input__box input:disabled~.input__label span,
.input__box input:disabled{
  cursor: not-allowed;
  color: #8E8E8E;
  background-color: #F5F5F5;
}

.input__box input:disabled + svg {
  cursor: not-allowed;
}

.input__box input:disabled + svg path {
  fill: #8E8E8E;
}

Input de texto secundário com ícones (busca e informações) e mensagem de erro

Preview

HTML

<div class="input__container">
   <div class="input__box">
      <input type="text" name="input-text" id="input-text" placeholder="example"/>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M12.0207 11.078L14.876 13.9327L13.9327 14.876L11.078 12.0207C10.0158 12.8722 8.69467 13.3353 7.33334 13.3334C4.02134 13.3334 1.33334 10.6454 1.33334 7.33337C1.33334 4.02137 4.02134 1.33337 7.33334 1.33337C10.6453 1.33337 13.3333 4.02137 13.3333 7.33337C13.3353 8.69471 12.8722 10.0159 12.0207 11.078ZM10.6833 10.5834C11.5294 9.7133 12.0019 8.54699 12 7.33337C12 4.75471 9.91134 2.66671 7.33334 2.66671C4.75467 2.66671 2.66667 4.75471 2.66667 7.33337C2.66667 9.91137 4.75467 12 7.33334 12C8.54696 12.002 9.71326 11.5294 10.5833 10.6834L10.6833 10.5834Z" fill="black"/>
      </svg>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
      <label class="input__label" for="input-text">
         <span>Label</span>
      </label>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>


<!-- Para deixar o input como inválido (borda vermelha e mensagem) adicione a classe 'invalid' na tag <div> juntamente com a classe "input__box".
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <div class="input__box invalid">
      <input type="text" name="input-text" id="input-text" placeholder="example"/>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M12.0207 11.078L14.876 13.9327L13.9327 14.876L11.078 12.0207C10.0158 12.8722 8.69467 13.3353 7.33334 13.3334C4.02134 13.3334 1.33334 10.6454 1.33334 7.33337C1.33334 4.02137 4.02134 1.33337 7.33334 1.33337C10.6453 1.33337 13.3333 4.02137 13.3333 7.33337C13.3353 8.69471 12.8722 10.0159 12.0207 11.078ZM10.6833 10.5834C11.5294 9.7133 12.0019 8.54699 12 7.33337C12 4.75471 9.91134 2.66671 7.33334 2.66671C4.75467 2.66671 2.66667 4.75471 2.66667 7.33337C2.66667 9.91137 4.75467 12 7.33334 12C8.54696 12.002 9.71326 11.5294 10.5833 10.6834L10.6833 10.5834Z" fill="black"/>
      </svg>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
      <label class="input__label" for="input-text">
         <span>Label</span>
      </label>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->


<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <div class="input__box">
      <input type="text" name="input-text" id="input-text" placeholder="example" disabled/>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M12.0207 11.078L14.876 13.9327L13.9327 14.876L11.078 12.0207C10.0158 12.8722 8.69467 13.3353 7.33334 13.3334C4.02134 13.3334 1.33334 10.6454 1.33334 7.33337C1.33334 4.02137 4.02134 1.33337 7.33334 1.33337C10.6453 1.33337 13.3333 4.02137 13.3333 7.33337C13.3353 8.69471 12.8722 10.0159 12.0207 11.078ZM10.6833 10.5834C11.5294 9.7133 12.0019 8.54699 12 7.33337C12 4.75471 9.91134 2.66671 7.33334 2.66671C4.75467 2.66671 2.66667 4.75471 2.66667 7.33337C2.66667 9.91137 4.75467 12 7.33334 12C8.54696 12.002 9.71326 11.5294 10.5833 10.6834L10.6833 10.5834Z" fill="black"/>
      </svg>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
      <label class="input__label" for="input-text">
         <span>Label</span>
      </label>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__box {
  width: 100%;
  height: 56px;
  border-radius: 4px;
  position: relative;
}

.input__box input{
  width: calc(100% - 88px);
  height: 20px;
  position: absolute;
  left: 44px;
  bottom: 9.5px;
  z-index: 2;
  border: none;
  outline: none;
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 400;
  color: #2C2C2C;
}

.input__box svg:first-of-type {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.input__box svg:nth-of-type(2) {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.input__label {
  width: 100%;
  height: 56px;
  background-color: white;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  cursor: text;
  position: absolute;
  top: 0;
  left: 0;
}

.input__label span{
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
  position: absolute;
  z-index: 3;
  left: 44px;
  top: 18px;
  transition: all linear 0.5s;
}

.input__box input:focus ~ .input__label span,
.input__box input:not(:placeholder-shown) ~ .input__label span{
  font-size: 12px;
  line-height: 16.8px;
  color: #8E8E8E;
  top: 9.5px;
}

.input__box:hover .input__label{
  border-color: #A7A7A7;
}

.input__box input:focus ~ .input__label {
  border: 1px solid #01141E;
}

.input__box input::placeholder{
  opacity: 0;
}

.input__box input:not(:placeholder-shown):not(:focus) ~ .input__label {
  border-color: #A7A7A7;
}

.input__info-invalid {
  font-size: 12px;
  line-height: 16.8px;
  font-weight: 400;
  color: #FF3939;
  display: none;
}

.input__box.invalid + .input__info-invalid {
  display: block;
}

.input__box.invalid .input__label{
  border: 1px solid #FF3939;
}

.input__box.invalid input:focus ~ .input__label{
  border: 1px solid #FF3939;
}

.input__box.invalid input:not(:focus) ~ .input__label{
  border-color: #FF3939;
}

.input__box input:disabled ~ .input__label,
.input__box input:disabled~.input__label span,
.input__box input:disabled{
  cursor: not-allowed;
  color: #8E8E8E;
  background-color: #F5F5F5;
}

.input__box input:disabled ~ svg {
  cursor: not-allowed;
}

.input__box input:disabled ~ svg path {
  fill: #8E8E8E;
}

Input para telefone

Preview

HTML

<!-- Adiconar essa tag no campo "head" do HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />

-->

<div class="input__container">
   <label class="input__label">Your number</label>
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="" />
   </div>
</div>


<!-- Para deixar o input como inválido (borda vermelha) adicione a classe 'invalid' na tag <input>.
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <label class="input__label">Your number</label>
   <div class="input__box invalid">
      <input type="number" name="input-number" id="input-number" placeholder="" />
   </div>
</div>

-->


<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <label class="input__label">Your number</label>
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="" disabled/>
   </div>
</div>

-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script>
   function initPhoneInputs() {
      const customPhoneInputs = document.querySelectorAll(".input__box input");
      customPhoneInputs.forEach(function(input) {
         const phoneInput = window.intlTelInput(input, {
            initialCountry: "br",
            utilsScript:
               "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
         });
      });
   }
   initPhoneInputs();
</script>

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__label {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
}

.input__box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  background-color: #fff;
  width: 100%;
  height: 44px;
  border-radius: 4px;
}

.input__box input {
  width: 100%;
  height: 100%;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  padding: 8px 12px 8px 54px;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #2C2C2C;
  outline: none;
}

.input__box input::placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
}

.input__box:hover input {
  border-color: #A7A7A7;
}

.input__box:hover input::placeholder {
  color: #434343;
}

.input__box input:focus {
  border: 1.5px solid #01141E;
}

.input__box input:not(:placeholder-shown):not(:focus) {
  border-color: #A7A7A7;
}

.input__box.invalid input {
  border: 1px solid #FF3939;
}

.input__box.invalid input:focus {
  border: 1.5px solid #FF3939;
}

.input__box.invalid input:not(:placeholder-shown):not(:focus) {
  border-color: #FF3939;
}

.input__box input:disabled {
  cursor: not-allowed;
  background-color: #F5F5F5;
}

.input__box input:disabled::placeholder {
  color: #757575;
}

/* reset do seletor de bandeiras dos países */
.iti{
  position: unset;
}

.iti__flag-container {
   height: 100%;
}

.input__box input:disabled-within ~ .iti *{
  cursor: not-allowed!important;
}

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{
  background-color: transparent;
}

.iti__selected-dial-code {
   color: #434343;
   font-size: 14px;
   font-weight: 400;
   line-height: 19.6px;
}

.iti__country-list {
   width: fit-content;
   max-width: 330px; /*ajuste conforme a largura do seu input*/
   border-top: none !important;
   border: 1px solid #E6E6E6;
   border-radius: 4px;
   top: 100%;
}

.iti__country-list li:hover{
  background-color: #E6E6E6;
}

.iti__country.iti__highlight{
  background-color: #E6E6E6;
}

.iti__country-list::-webkit-scrollbar {
   width: 4px;
   height: 4px;
}

.iti__country-list::-webkit-scrollbar-thumb {
   background-color: #434343;
}

.iti__country-list::-webkit-scrollbar-track {
   background-color: #E6E6E6;
}

Input para telefone com informação

Preview

HTML

<!-- Adiconar essa tag no campo "head" do HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />

-->

<div class="input__container">
   <label class="input__label">Your number</label>
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="" />
   </div>
   <span class="input__info">Information message</span>
</div>


<!-- Para deixar o input como inválido (borda vermelha) adicione a classe 'invalid' na tag <input>.
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <label class="input__label">Your number</label>
   <div class="input__box invalid">
      <input type="number" name="input-number" id="input-number" placeholder="" />
   </div>
   <span class="input__info">Information message</span>
</div>

-->


<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <label class="input__label">Your number</label>
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="" disabled/>
   </div>
   <span class="input__info">Information message</span>
</div>

-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script>
   function initPhoneInputs() {
      const customPhoneInputs = document.querySelectorAll(".input__box input");
      customPhoneInputs.forEach(function(input) {
         const phoneInput = window.intlTelInput(input, {
            initialCountry: "br",
            utilsScript:
               "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
         });
      });
   }
   initPhoneInputs();
</script>

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__label {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
}

.input__box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  background-color: #fff;
  width: 100%;
  height: 44px;
  border-radius: 4px;
}

.input__box input {
  width: 100%;
  height: 100%;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  padding: 8px 12px 8px 54px;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #2C2C2C;
  outline: none;
}

.input__box input::placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
}

.input__box:hover input {
  border-color: #A7A7A7;
}

.input__box:hover input::placeholder {
  color: #434343;
}

.input__box input:focus {
  border: 1.5px solid #01141E;
}

.input__box input:not(:placeholder-shown):not(:focus) {
  border-color: #A7A7A7;
}

.input__info {
  font-size: 12px;
  line-height: 16.8px;
  font-weight: 400;
  color: #757575;
}

.input__box.invalid input {
  border: 1px solid #FF3939;
}

.input__box.invalid input:focus {
  border: 1.5px solid #FF3939;
}

.input__box.invalid input:not(:placeholder-shown):not(:focus) {
  border-color: #FF3939;
}

.input__box.invalid+.input__info {
  color: #FF3939 !important;
}

.input__box input:disabled {
  cursor: not-allowed;
  background-color: #F5F5F5;
}

.input__box input:disabled::placeholder {
  color: #757575;
}

/* reset do seletor de bandeiras dos países */
.iti{
  position: unset;
}

.iti__flag-container {
   height: 100%;
}

.input__box input:disabled-within ~ .iti *{
  cursor: not-allowed!important;
}

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{
  background-color: transparent;
}

.iti__selected-dial-code {
   color: #434343;
   font-size: 14px;
   font-weight: 400;
   line-height: 19.6px;
}

.iti__country-list {
   width: fit-content;
   max-width: 330px; /*ajuste conforme a largura do seu input*/
   border-top: none !important;
   border: 1px solid #E6E6E6;
   border-radius: 4px;
   top: 100%;
}

.iti__country-list li:hover{
  background-color: #E6E6E6;
}

.iti__country.iti__highlight{
  background-color: #E6E6E6;
}

.iti__country-list::-webkit-scrollbar {
   width: 4px;
   height: 4px;
}

.iti__country-list::-webkit-scrollbar-thumb {
   background-color: #434343;
}

.iti__country-list::-webkit-scrollbar-track {
   background-color: #E6E6E6;
}

Input para telefone com ícone de informações e mensagem de erro

Preview

HTML

<!-- Adiconar essa tag no campo "head" do HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />

-->

<div class="input__container">
   <label class="input__label">Your number</label>
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="" />
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>


<!-- Para deixar o input como inválido (borda vermelha e mensagem) adicione a classe 'invalid' na tag <input>.
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <label class="input__label">Your number</label>
   <div class="input__box invalid">
      <input type="number" name="input-number" id="input-number" placeholder="" />
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->


<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <label class="input__label">Your number</label>
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="" disabled/>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script>
   function initPhoneInputs() {
      const customPhoneInputs = document.querySelectorAll(".input__box input");
      customPhoneInputs.forEach(function(input) {
         const phoneInput = window.intlTelInput(input, {
            initialCountry: "br",
            utilsScript:
               "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
         });
      });
   }
   initPhoneInputs();
</script>

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__label {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
}

.input__box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  background-color: #fff;
  width: 100%;
  height: 44px;
  border-radius: 4px;
}

.input__box input {
  width: 100%;
  height: 100%;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  padding: 8px 38px 8px 54px;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #2C2C2C;
  outline: none;
}

.input__box input::placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
}

.input__box:hover input {
  border-color: #A7A7A7;
}

.input__box:hover input::placeholder {
  color: #434343;
}

.input__box input:focus {
  border: 1.5px solid #01141E;
}

.input__box input:not(:placeholder-shown):not(:focus) {
  border-color: #A7A7A7;
}

.input__box svg {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.input__info-invalid {
  font-size: 12px;
  line-height: 16.8px;
  font-weight: 400;
  color: #FF3939;
  display: none;
}

.input__box.invalid+.input__info-invalid {
  display: block;
}

.input__box.invalid input {
  border: 1px solid #FF3939;
}

.input__box.invalid input:focus {
  border: 1.5px solid #FF3939;
}

.input__box.invalid input:not(:placeholder-shown):not(:focus) {
  border-color: #FF3939;
}

.input__box input:disabled {
  cursor: not-allowed;
  background-color: #F5F5F5;
}

.input__box input:disabled::placeholder {
  color: #757575;
}

/* reset do seletor de bandeiras dos países */
.iti{
  position: unset;
}

.iti__flag-container {
   height: 100%;
}

.input__box input:disabled-within ~ .iti *{
  cursor: not-allowed!important;
}

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{
  background-color: transparent;
}

.iti__selected-dial-code {
   color: #434343;
   font-size: 14px;
   font-weight: 400;
   line-height: 19.6px;
}

.iti__country-list {
   width: fit-content;
   max-width: 330px; /*ajuste conforme a largura do seu input*/
   border-top: none !important;
   border: 1px solid #E6E6E6;
   border-radius: 4px;
   top: 100%;
}

.iti__country-list li:hover{
  background-color: #E6E6E6;
}

.iti__country.iti__highlight{
  background-color: #E6E6E6;
}

.iti__country-list::-webkit-scrollbar {
   width: 4px;
   height: 4px;
}

.iti__country-list::-webkit-scrollbar-thumb {
   background-color: #434343;
}

.iti__country-list::-webkit-scrollbar-track {
   background-color: #E6E6E6;
}

Input secundário para telefone

Preview

HTML

<!-- Adiconar essa tag no campo "head" do HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />

-->

<div class="input__container">
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="" />
      <label class="input__label" for="input-number">Your number</label>
   </div>
</div>


<!-- Para deixar o input como inválido (borda vermelha) adicione a classe 'invalid' na tag <input>.
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <div class="input__box invalid">
      <input type="number" name="input-number" id="input-number" placeholder="" />
      <label class="input__label" for="input-number">Your number</label>
   </div>
</div>

-->


<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="" disabled/>
      <label class="input__label" for="input-number">Your number</label>
   </div>
</div>

-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script>
   function initPhoneInputs() {
      const customPhoneInputs = document.querySelectorAll(".input__box input");
      customPhoneInputs.forEach(function(input) {
         const phoneInput = window.intlTelInput(input, {
            initialCountry: "br",
            utilsScript:
               "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
         });
      });
   }
   initPhoneInputs();

   document.querySelectorAll('.input__container').forEach(container => {
      const input = container.querySelector('input');
      const label = container.querySelector('.input__label');

      input.addEventListener('focus', () => label.classList.add('active'));
      input.addEventListener('blur', () => {
         if (!input.value) {
            label.classList.remove('active');
         }
      });
   });
</script>

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  background-color: #fff;
  width: 100%;
  height: 56px;
  border-radius: 4px;
}

.input__box input {
  width: 100%;
  height: 100%;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  padding: 8px 16px 8px 54px;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #2C2C2C;
  outline: none;
  transition: all linear 0.5s;
}

.input__box input::placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
}

.input__box:hover input {
  border-color: #A7A7A7;
}

.input__box:hover input::placeholder {
  color: #434343;
}

.input__box input:focus {
  border: 1.5px solid #01141E;
  padding-top: 18.5px;
}

.input__box input:not(:placeholder-shown):not(:focus) {
  border-color: #A7A7A7;
  padding-top: 18.5px;
}

.input__label {
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  color: #8E8E8E;
  opacity: 0;
  visibility: hidden;
  left: 54px;
  top: 18px;
  position: absolute;
  transition: all linear 0.5s;
}

.input__label.active {
  visibility: visible;
  opacity: 1;
  top: 9.5px;
}

.input__box.invalid input {
  border: 1px solid #FF3939;
}

.input__box.invalid input:focus {
  border: 1.5px solid #FF3939;
}

.input__box.invalid input:not(:placeholder-shown):not(:focus) {
  border-color: #FF3939;
}

.input__box input:disabled {
  cursor: not-allowed;
  background-color: #F5F5F5;
}

.input__box input:disabled ~ .input__label{
  cursor: not-allowed;
}

.input__box input:disabled::placeholder {
  color: #757575;
}

/* reset do seletor de bandeiras dos países */
.iti{
  position: unset;
}

.iti__flag-container {
   height: 100%;
}

.input__box input:disabled-within ~ .iti *{
  cursor: not-allowed!important;
}

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{
  background-color: transparent;
}

.iti__selected-dial-code {
   color: #434343;
   font-size: 14px;
   font-weight: 400;
   line-height: 19.6px;
}

.iti__country-list {
   width: fit-content;
   max-width: 330px; /*ajuste conforme a largura do seu input*/
   border-top: none !important;
   border: 1px solid #E6E6E6;
   border-radius: 4px;
   top: 100%;
}

.iti__country-list li:hover{
  background-color: #E6E6E6;
}

.iti__country.iti__highlight{
  background-color: #E6E6E6;
}

.iti__country-list::-webkit-scrollbar {
   width: 4px;
   height: 4px;
}

.iti__country-list::-webkit-scrollbar-thumb {
   background-color: #434343;
}

.iti__country-list::-webkit-scrollbar-track {
   background-color: #E6E6E6;
}

Input secundário para telefone com informação

Preview

HTML

<!-- Adiconar essa tag no campo "head" do HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />

-->

<div class="input__container">
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="" />
      <label class="input__label" for="input-number">Your number</label>
   </div>
   <span class="input__info">Information message</span>
</div>


<!-- Para deixar o input como inválido (borda vermelha) adicione a classe 'invalid' na tag <input>.
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <div class="input__box invalid">
      <input type="number" name="input-number" id="input-number" placeholder="" />
      <label class="input__label" for="input-number">Your number</label>
   </div>
   <span class="input__info">Information message</span>
</div>

-->


<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="" disabled/>
      <label class="input__label" for="input-number">Your number</label>
   </div>
   <span class="input__info">Information message</span>
</div>

-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script>
   function initPhoneInputs() {
      const customPhoneInputs = document.querySelectorAll(".input__box input");
      customPhoneInputs.forEach(function(input) {
         const phoneInput = window.intlTelInput(input, {
            initialCountry: "br",
            utilsScript:
               "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
         });
      });
   }
   initPhoneInputs();

   document.querySelectorAll('.input__container').forEach(container => {
      const input = container.querySelector('input');
      const label = container.querySelector('.input__label');

      input.addEventListener('focus', () => label.classList.add('active'));
      input.addEventListener('blur', () => {
         if (!input.value) {
            label.classList.remove('active');
         }
      });
   });
</script>

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  background-color: #fff;
  width: 100%;
  height: 56px;
  border-radius: 4px;
}

.input__box input {
  width: 100%;
  height: 100%;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  padding: 8px 16px 8px 54px;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #2C2C2C;
  outline: none;
  transition: all linear 0.5s;
}

.input__box input::placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
}

.input__box:hover input {
  border-color: #A7A7A7;
}

.input__box:hover input::placeholder {
  color: #434343;
}

.input__box input:focus {
  border: 1.5px solid #01141E;
  padding-top: 18.5px;
}

.input__box input:not(:placeholder-shown):not(:focus) {
  border-color: #A7A7A7;
  padding-top: 18.5px;
}

.input__label {
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  color: #8E8E8E;
  opacity: 0;
  visibility: hidden;
  left: 54px;
  top: 18px;
  position: absolute;
  transition: all linear 0.5s;
}

.input__label.active {
  visibility: visible;
  opacity: 1;
  top: 9.5px;
}

.input__info {
  font-size: 12px;
  line-height: 16.8px;
  font-weight: 400;
  color: #757575;
}

.input__box.invalid input {
  border: 1px solid #FF3939;
}

.input__box.invalid input:focus {
  border: 1.5px solid #FF3939;
}

.input__box.invalid input:not(:placeholder-shown):not(:focus) {
  border-color: #FF3939;
}

.input__box.invalid+.input__info {
  color: #FF3939 !important;
}

.input__box input:disabled {
  cursor: not-allowed;
  background-color: #F5F5F5;
}

.input__box input:disabled ~ .input__label{
  cursor: not-allowed;
}

.input__box input:disabled::placeholder {
  color: #757575;
}

/* reset do seletor de bandeiras dos países */
.iti{
  position: unset;
}

.iti__flag-container {
   height: 100%;
}

.input__box input:disabled-within ~ .iti *{
  cursor: not-allowed!important;
}

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{
  background-color: transparent;
}

.iti__selected-dial-code {
   color: #434343;
   font-size: 14px;
   font-weight: 400;
   line-height: 19.6px;
}

.iti__country-list {
   width: fit-content;
   max-width: 330px; /*ajuste conforme a largura do seu input*/
   border-top: none !important;
   border: 1px solid #E6E6E6;
   border-radius: 4px;
   top: 100%;
}

.iti__country-list li:hover{
  background-color: #E6E6E6;
}

.iti__country.iti__highlight{
  background-color: #E6E6E6;
}

.iti__country-list::-webkit-scrollbar {
   width: 4px;
   height: 4px;
}

.iti__country-list::-webkit-scrollbar-thumb {
   background-color: #434343;
}

.iti__country-list::-webkit-scrollbar-track {
   background-color: #E6E6E6;
}

Input secundário para telefone com ícone de informações e mensagem de erro

Preview

HTML

<!-- Adiconar essa tag no campo "head" do HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />

-->

<div class="input__container">
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="" />
      <label class="input__label" for="input-number">Your number</label>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>


<!-- Para deixar o input como inválido (borda vermelha e mensagem) adicione a classe 'invalid' na tag <input>.
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <div class="input__box invalid">
      <input type="number" name="input-number" id="input-number" placeholder="" />
      <label class="input__label" for="input-number">Your number</label>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->


<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="" disabled/>
      <label class="input__label" for="input-number">Your number</label>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script>
   function initPhoneInputs() {
      const customPhoneInputs = document.querySelectorAll(".input__box input");
      customPhoneInputs.forEach(function(input) {
         const phoneInput = window.intlTelInput(input, {
            initialCountry: "br",
            utilsScript:
               "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
         });
      });
   }
   initPhoneInputs();

   document.querySelectorAll('.input__container').forEach(container => {
      const input = container.querySelector('input');
      const label = container.querySelector('.input__label');

      input.addEventListener('focus', () => label.classList.add('active'));
      input.addEventListener('blur', () => {
         if (!input.value) {
            label.classList.remove('active');
         }
      });
   });
</script>

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  background-color: #fff;
  width: 100%;
  height: 56px;
  border-radius: 4px;
}

.input__box input {
  width: 100%;
  height: 100%;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  padding: 8px 46px 8px 54px;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #2C2C2C;
  outline: none;
  transition: all linear 0.5s;
}

.input__box input::placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
}

.input__box:hover input {
  border-color: #A7A7A7;
}

.input__box:hover input::placeholder {
  color: #434343;
}

.input__box input:focus {
  border: 1.5px solid #01141E;
  padding-top: 18.5px;
}

.input__box input:not(:placeholder-shown):not(:focus) {
  border-color: #A7A7A7;
  padding-top: 18.5px;
}

.input__label {
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  color: #8E8E8E;
  opacity: 0;
  visibility: hidden;
  left: 54px;
  top: 18px;
  position: absolute;
  transition: all linear 0.5s;
}

.input__label.active {
  visibility: visible;
  opacity: 1;
  top: 9.5px;
}

.input__box svg {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.input__info-invalid {
  font-size: 12px;
  line-height: 16.8px;
  font-weight: 400;
  color: #FF3939;
  display: none;
}

.input__box.invalid+.input__info-invalid {
  display: block;
}

.input__box.invalid input {
  border: 1px solid #FF3939;
}

.input__box.invalid input:focus {
  border: 1.5px solid #FF3939;
}

.input__box.invalid input:not(:placeholder-shown):not(:focus) {
  border-color: #FF3939;
}

.input__box input:disabled {
  cursor: not-allowed;
  background-color: #F5F5F5;
}

.input__box input:disabled ~ .input__label{
  cursor: not-allowed;
}

.input__box input:disabled::placeholder {
  color: #757575;
}

/* reset do seletor de bandeiras dos países */
.iti{
  position: unset;
}

.iti__flag-container {
   height: 100%;
}

.input__box input:disabled-within ~ .iti *{
  cursor: not-allowed!important;
}

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag{
  background-color: transparent;
}

.iti__selected-dial-code {
   color: #434343;
   font-size: 14px;
   font-weight: 400;
   line-height: 19.6px;
}

.iti__country-list {
   width: fit-content;
   max-width: 330px; /*ajuste conforme a largura do seu input*/
   border-top: none !important;
   border: 1px solid #E6E6E6;
   border-radius: 4px;
   top: 100%;
}

.iti__country-list li:hover{
  background-color: #E6E6E6;
}

.iti__country.iti__highlight{
  background-color: #E6E6E6;
}

.iti__country-list::-webkit-scrollbar {
   width: 4px;
   height: 4px;
}

.iti__country-list::-webkit-scrollbar-thumb {
   background-color: #434343;
}

.iti__country-list::-webkit-scrollbar-track {
   background-color: #E6E6E6;
}

Input para cartão de crédito

Preview

HTML

<div class="input__container">
   <label class="input__label">Your number</label>
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="Card Number" />
      <svg width="34" height="24" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" fill="white"/>
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" stroke="#E6E6E6"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C15.9949 17.8275 14.459 18.43 12.7807 18.43C9.03582 18.43 6 15.4303 6 11.73C6 8.02966 9.03582 5.02997 12.7807 5.02997C14.459 5.02997 15.9949 5.63247 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5773 5.02997C25.3221 5.02997 28.358 8.02966 28.358 11.73C28.358 15.4303 25.3221 18.43 21.5773 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#ED0006"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68801 18.6369 7.85941 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5772 5.02997C25.3221 5.02997 28.3579 8.02966 28.3579 11.73C28.3579 15.4303 25.3221 18.43 21.5772 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#F9A000"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68804 18.6369 7.85945 17.179 6.63054C15.7211 7.85945 14.7966 9.68804 14.7966 11.73C14.7966 13.7719 15.7211 15.6005 17.179 16.8294Z" fill="#FF5E00"/>
      </svg>
   </div>
</div>


<!-- Para deixar o input como inválido (borda vermelha) adicione a classe 'invalid' na tag <input>.
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <label class="input__label">Your number</label>
   <div class="input__box invalid">
      <input type="number" name="input-number" id="input-number" placeholder="Card Number" />
      <svg width="34" height="24" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" fill="white"/>
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" stroke="#E6E6E6"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C15.9949 17.8275 14.459 18.43 12.7807 18.43C9.03582 18.43 6 15.4303 6 11.73C6 8.02966 9.03582 5.02997 12.7807 5.02997C14.459 5.02997 15.9949 5.63247 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5773 5.02997C25.3221 5.02997 28.358 8.02966 28.358 11.73C28.358 15.4303 25.3221 18.43 21.5773 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#ED0006"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68801 18.6369 7.85941 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5772 5.02997C25.3221 5.02997 28.3579 8.02966 28.3579 11.73C28.3579 15.4303 25.3221 18.43 21.5772 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#F9A000"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68804 18.6369 7.85945 17.179 6.63054C15.7211 7.85945 14.7966 9.68804 14.7966 11.73C14.7966 13.7719 15.7211 15.6005 17.179 16.8294Z" fill="#FF5E00"/>
      </svg>
   </div>
</div>

-->

<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <label class="input__label">Your number</label>
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="Card Number" disabled/>
      <svg width="34" height="24" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" fill="white"/>
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" stroke="#E6E6E6"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C15.9949 17.8275 14.459 18.43 12.7807 18.43C9.03582 18.43 6 15.4303 6 11.73C6 8.02966 9.03582 5.02997 12.7807 5.02997C14.459 5.02997 15.9949 5.63247 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5773 5.02997C25.3221 5.02997 28.358 8.02966 28.358 11.73C28.358 15.4303 25.3221 18.43 21.5773 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#ED0006"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68801 18.6369 7.85941 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5772 5.02997C25.3221 5.02997 28.3579 8.02966 28.3579 11.73C28.3579 15.4303 25.3221 18.43 21.5772 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#F9A000"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68804 18.6369 7.85945 17.179 6.63054C15.7211 7.85945 14.7966 9.68804 14.7966 11.73C14.7966 13.7719 15.7211 15.6005 17.179 16.8294Z" fill="#FF5E00"/>
      </svg>
   </div>
</div>

-->

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__label {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
}

.input__box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  background-color: #fff;
  width: 100%;
  height: 44px;
  border-radius: 4px;
}

.input__box svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.input__box input {
  width: 100%;
  height: 100%;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  padding: 8px 12px 8px 54px;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #2C2C2C;
  outline: none;
}

.input__box input::placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
}

.input__box:hover input {
  border-color: #A7A7A7;
}

.input__box:hover input::placeholder{
  color: #434343;
}

.input__box input:focus {
  border: 1.5px solid #01141E;
}

.input__box input:not(:placeholder-shown):not(:focus) {
  border-color: #A7A7A7;
}

.input__box.invalid input {
  border: 1px solid #FF3939;
}

.input__box.invalid input:focus {
  border: 1.5px solid #FF3939;
}

.input__box.invalid input:not(:placeholder-shown):not(:focus) {
  border-color: #FF3939;
}

.input__box input:disabled {
  cursor: not-allowed;
  background-color: #F5F5F5;
}

.input__box input:disabled::placeholder{
  color: #757575;
}

.input__box input:disabled+svg {
  cursor: not-allowed;
}

Input para cartão de crédito com informação

Preview

HTML

<div class="input__container">
   <label class="input__label">Your number</label>
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="Card Number" />
      <svg width="34" height="24" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" fill="white"/>
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" stroke="#E6E6E6"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C15.9949 17.8275 14.459 18.43 12.7807 18.43C9.03582 18.43 6 15.4303 6 11.73C6 8.02966 9.03582 5.02997 12.7807 5.02997C14.459 5.02997 15.9949 5.63247 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5773 5.02997C25.3221 5.02997 28.358 8.02966 28.358 11.73C28.358 15.4303 25.3221 18.43 21.5773 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#ED0006"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68801 18.6369 7.85941 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5772 5.02997C25.3221 5.02997 28.3579 8.02966 28.3579 11.73C28.3579 15.4303 25.3221 18.43 21.5772 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#F9A000"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68804 18.6369 7.85945 17.179 6.63054C15.7211 7.85945 14.7966 9.68804 14.7966 11.73C14.7966 13.7719 15.7211 15.6005 17.179 16.8294Z" fill="#FF5E00"/>
      </svg>
   </div>
   <span class="input__info">Information message</span>
</div>


<!-- Para deixar o input como inválido (borda vermelha) adicione a classe 'invalid' na tag <input>.
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <label class="input__label">Your number</label>
   <div class="input__box invalid">
      <input type="number" name="input-number" id="input-number" placeholder="Card Number" />
      <svg width="34" height="24" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" fill="white"/>
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" stroke="#E6E6E6"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C15.9949 17.8275 14.459 18.43 12.7807 18.43C9.03582 18.43 6 15.4303 6 11.73C6 8.02966 9.03582 5.02997 12.7807 5.02997C14.459 5.02997 15.9949 5.63247 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5773 5.02997C25.3221 5.02997 28.358 8.02966 28.358 11.73C28.358 15.4303 25.3221 18.43 21.5773 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#ED0006"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68801 18.6369 7.85941 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5772 5.02997C25.3221 5.02997 28.3579 8.02966 28.3579 11.73C28.3579 15.4303 25.3221 18.43 21.5772 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#F9A000"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68804 18.6369 7.85945 17.179 6.63054C15.7211 7.85945 14.7966 9.68804 14.7966 11.73C14.7966 13.7719 15.7211 15.6005 17.179 16.8294Z" fill="#FF5E00"/>
      </svg>
   </div>
   <span class="input__info">Information message</span>
</div>

-->

<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <label class="input__label">Your number</label>
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="Card Number" disabled/>
      <svg width="34" height="24" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" fill="white"/>
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" stroke="#E6E6E6"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C15.9949 17.8275 14.459 18.43 12.7807 18.43C9.03582 18.43 6 15.4303 6 11.73C6 8.02966 9.03582 5.02997 12.7807 5.02997C14.459 5.02997 15.9949 5.63247 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5773 5.02997C25.3221 5.02997 28.358 8.02966 28.358 11.73C28.358 15.4303 25.3221 18.43 21.5773 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#ED0006"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68801 18.6369 7.85941 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5772 5.02997C25.3221 5.02997 28.3579 8.02966 28.3579 11.73C28.3579 15.4303 25.3221 18.43 21.5772 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#F9A000"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68804 18.6369 7.85945 17.179 6.63054C15.7211 7.85945 14.7966 9.68804 14.7966 11.73C14.7966 13.7719 15.7211 15.6005 17.179 16.8294Z" fill="#FF5E00"/>
      </svg>
   </div>
   <span class="input__info">Information message</span>
</div>

-->

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__label {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
}

.input__box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  background-color: #fff;
  width: 100%;
  height: 44px;
  border-radius: 4px;
}

.input__box svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.input__box input {
  width: 100%;
  height: 100%;
  outline: none;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  padding: 8px 12px 8px 54px;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #2C2C2C;
}

.input__box input::placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
}

.input__box:hover input {
  border-color: #A7A7A7;
}

.input__box:hover input::placeholder{
  color: #434343;
}

.input__box input:focus {
  border: 1.5px solid #01141E;
}

.input__box input:not(:placeholder-shown):not(:focus) {
  border-color: #A7A7A7;
}

.input__info {
  font-size: 12px;
  line-height: 16.8px;
  font-weight: 400;
  color: #757575;
}

.input__box.invalid input {
  border: 1px solid #FF3939;
}

.input__box.invalid input:focus {
  border: 1.5px solid #FF3939;
}

.input__box.invalid input:not(:placeholder-shown):not(:focus) {
  border-color: #FF3939;
}

.input__box.invalid+.input__info {
  color: #FF3939 !important;
}

.input__box input:disabled {
  cursor: not-allowed;
  background-color: #F5F5F5;
}

.input__box input:disabled::placeholder{
  color: #757575;
}

.input__box input:disabled+svg {
  cursor: not-allowed;
}

Input para cartão de crédito com ícone de informações e mensagem de erro

Preview

HTML

<div class="input__container">
   <label class="input__label">Your number</label>
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="Card Number" />
      <svg width="34" height="24" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" fill="white"/>
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" stroke="#E6E6E6"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C15.9949 17.8275 14.459 18.43 12.7807 18.43C9.03582 18.43 6 15.4303 6 11.73C6 8.02966 9.03582 5.02997 12.7807 5.02997C14.459 5.02997 15.9949 5.63247 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5773 5.02997C25.3221 5.02997 28.358 8.02966 28.358 11.73C28.358 15.4303 25.3221 18.43 21.5773 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#ED0006"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68801 18.6369 7.85941 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5772 5.02997C25.3221 5.02997 28.3579 8.02966 28.3579 11.73C28.3579 15.4303 25.3221 18.43 21.5772 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#F9A000"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68804 18.6369 7.85945 17.179 6.63054C15.7211 7.85945 14.7966 9.68804 14.7966 11.73C14.7966 13.7719 15.7211 15.6005 17.179 16.8294Z" fill="#FF5E00"/>
      </svg>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>


<!-- Para deixar o input como inválido (borda vermelha e mensagem) adicione a classe 'invalid' na tag <div> juntamente com a classe "input__box".
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <label class="input__label">Your number</label>
   <div class="input__box invalid">
      <input type="number" name="input-number" id="input-number" placeholder="Card Number" />
      <svg width="34" height="24" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" fill="white"/>
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" stroke="#E6E6E6"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C15.9949 17.8275 14.459 18.43 12.7807 18.43C9.03582 18.43 6 15.4303 6 11.73C6 8.02966 9.03582 5.02997 12.7807 5.02997C14.459 5.02997 15.9949 5.63247 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5773 5.02997C25.3221 5.02997 28.358 8.02966 28.358 11.73C28.358 15.4303 25.3221 18.43 21.5773 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#ED0006"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68801 18.6369 7.85941 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5772 5.02997C25.3221 5.02997 28.3579 8.02966 28.3579 11.73C28.3579 15.4303 25.3221 18.43 21.5772 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#F9A000"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68804 18.6369 7.85945 17.179 6.63054C15.7211 7.85945 14.7966 9.68804 14.7966 11.73C14.7966 13.7719 15.7211 15.6005 17.179 16.8294Z" fill="#FF5E00"/>
      </svg>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->

<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <label class="input__label">Your number</label>
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="Card Number" disabled />
      <svg width="34" height="24" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" fill="white"/>
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" stroke="#E6E6E6"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C15.9949 17.8275 14.459 18.43 12.7807 18.43C9.03582 18.43 6 15.4303 6 11.73C6 8.02966 9.03582 5.02997 12.7807 5.02997C14.459 5.02997 15.9949 5.63247 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5773 5.02997C25.3221 5.02997 28.358 8.02966 28.358 11.73C28.358 15.4303 25.3221 18.43 21.5773 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#ED0006"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68801 18.6369 7.85941 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5772 5.02997C25.3221 5.02997 28.3579 8.02966 28.3579 11.73C28.3579 15.4303 25.3221 18.43 21.5772 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#F9A000"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68804 18.6369 7.85945 17.179 6.63054C15.7211 7.85945 14.7966 9.68804 14.7966 11.73C14.7966 13.7719 15.7211 15.6005 17.179 16.8294Z" fill="#FF5E00"/>
      </svg>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__label {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
}

.input__box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  background-color: #fff;
  width: 100%;
  height: 44px;
  border-radius: 4px;
}

.input__box svg:first-of-type {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.input__box svg:nth-of-type(2) {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.input__box input {
  width: 100%;
  height: 100%;
  outline: none;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  padding: 8px 36px 8px 54px;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #2C2C2C;
}

.input__box input::placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
}

.input__box:hover input {
  border-color: #A7A7A7;
}

.input__box:hover input::placeholder{
  color: #434343;
}

.input__box input:focus {
  border: 1.5px solid #01141E;
}

.input__box input:not(:placeholder-shown):not(:focus) {
  border-color: #A7A7A7;
}

.input__info-invalid {
  font-size: 12px;
  line-height: 16.8px;
  font-weight: 400;
  color: #FF3939;
  display: none;
}

.input__box.invalid + .input__info-invalid {
  display: block;
}

.input__box.invalid input {
  border: 1px solid #FF3939;
}

.input__box.invalid input:focus {
  border: 1.5px solid #FF3939;
}

.input__box.invalid input:not(:placeholder-shown):not(:focus) {
  border-color: #FF3939;
}

.input__box input:disabled {
  cursor: not-allowed;
  background-color: #F5F5F5;
}

.input__box input:disabled::placeholder{
  color: #757575;
}

.input__box input:disabled ~ svg {
  cursor: not-allowed;
}

Input secundário para cartão de crédito

Preview

HTML

<div class="input__container">
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="example"/>
      <svg width="34" height="24" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" fill="white"/>
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" stroke="#E6E6E6"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C15.9949 17.8275 14.459 18.43 12.7807 18.43C9.03582 18.43 6 15.4303 6 11.73C6 8.02966 9.03582 5.02997 12.7807 5.02997C14.459 5.02997 15.9949 5.63247 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5773 5.02997C25.3221 5.02997 28.358 8.02966 28.358 11.73C28.358 15.4303 25.3221 18.43 21.5773 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#ED0006"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68801 18.6369 7.85941 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5772 5.02997C25.3221 5.02997 28.3579 8.02966 28.3579 11.73C28.3579 15.4303 25.3221 18.43 21.5772 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#F9A000"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68804 18.6369 7.85945 17.179 6.63054C15.7211 7.85945 14.7966 9.68804 14.7966 11.73C14.7966 13.7719 15.7211 15.6005 17.179 16.8294Z" fill="#FF5E00"/>
      </svg>
      <label class="input__label" for="input-number">
         <span>Label</span>
      </label>
   </div>
</div>


<!-- Para deixar o input como inválido (borda vermelha) adicione a classe 'invalid' na tag <input>.
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <div class="input__box invalid">
      <input type="number" name="input-number" id="input-number" placeholder="example"/>
      <svg width="34" height="24" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" fill="white"/>
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" stroke="#E6E6E6"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C15.9949 17.8275 14.459 18.43 12.7807 18.43C9.03582 18.43 6 15.4303 6 11.73C6 8.02966 9.03582 5.02997 12.7807 5.02997C14.459 5.02997 15.9949 5.63247 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5773 5.02997C25.3221 5.02997 28.358 8.02966 28.358 11.73C28.358 15.4303 25.3221 18.43 21.5773 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#ED0006"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68801 18.6369 7.85941 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5772 5.02997C25.3221 5.02997 28.3579 8.02966 28.3579 11.73C28.3579 15.4303 25.3221 18.43 21.5772 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#F9A000"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68804 18.6369 7.85945 17.179 6.63054C15.7211 7.85945 14.7966 9.68804 14.7966 11.73C14.7966 13.7719 15.7211 15.6005 17.179 16.8294Z" fill="#FF5E00"/>
      </svg>
      <label class="input__label" for="input-number">
         <span>Label</span>
      </label>
   </div>
</div>

-->

<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="example" disabled/>
      <svg width="34" height="24" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" fill="white"/>
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" stroke="#E6E6E6"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C15.9949 17.8275 14.459 18.43 12.7807 18.43C9.03582 18.43 6 15.4303 6 11.73C6 8.02966 9.03582 5.02997 12.7807 5.02997C14.459 5.02997 15.9949 5.63247 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5773 5.02997C25.3221 5.02997 28.358 8.02966 28.358 11.73C28.358 15.4303 25.3221 18.43 21.5773 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#ED0006"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68801 18.6369 7.85941 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5772 5.02997C25.3221 5.02997 28.3579 8.02966 28.3579 11.73C28.3579 15.4303 25.3221 18.43 21.5772 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#F9A000"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68804 18.6369 7.85945 17.179 6.63054C15.7211 7.85945 14.7966 9.68804 14.7966 11.73C14.7966 13.7719 15.7211 15.6005 17.179 16.8294Z" fill="#FF5E00"/>
      </svg>
      <label class="input__label" for="input-number">
         <span>Label</span>
      </label>
   </div>
</div>

-->

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__box {
  width: 100%;
  height: 56px;
  border-radius: 4px;
  position: relative;
}

.input__box input {
  width: calc(100% - 74px);
  height: 20px;
  position: absolute;
  left: 58px;
  bottom: 9.5px;
  z-index: 2;
  border: none;
  outline: none;
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 400;
  color: #2C2C2C;
}

.input__box svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.input__label {
  width: 100%;
  height: 56px;
  background-color: white;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  cursor: text;
  position: absolute;
  top: 0;
  left: 0;
}

.input__label span {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
  position: absolute;
  z-index: 3;
  left: 58px;
  top: 18px;
  transition: all linear 0.5s;
}

.input__box input:focus~.input__label span,
.input__box input:not(:placeholder-shown)~.input__label span {
  font-size: 12px;
  line-height: 16.8px;
  color: #8E8E8E;
  top: 9.5px;
}

.input__box:hover .input__label {
  border-color: #A7A7A7;
}

.input__box:hover .input__label span{
  color: #434343;
}

.input__box input:focus~.input__label {
  border: 1px solid #01141E;
}

.input__box input::placeholder {
  opacity: 0;
}

.input__box input:not(:placeholder-shown):not(:focus)~.input__label {
  border-color: #A7A7A7;
}

.input__box.invalid .input__label {
  border: 1px solid #FF3939;
}

.input__box.invalid input:focus~.input__label {
  border: 1px solid #FF3939;
}

.input__box.invalid input:not(:focus)~.input__label {
  border-color: #FF3939;
}

.input__box input:disabled~.input__label,
.input__box input:disabled~.input__label span,
.input__box input:disabled {
  cursor: not-allowed;
  color: #8E8E8E;
  background-color: #F5F5F5;
}

.input__box input:disabled+svg {
  cursor: not-allowed;
}

Input secundário para cartão de crédito com informação

Preview

HTML

<div class="input__container">
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="example"/>
      <svg width="34" height="24" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" fill="white"/>
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" stroke="#E6E6E6"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C15.9949 17.8275 14.459 18.43 12.7807 18.43C9.03582 18.43 6 15.4303 6 11.73C6 8.02966 9.03582 5.02997 12.7807 5.02997C14.459 5.02997 15.9949 5.63247 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5773 5.02997C25.3221 5.02997 28.358 8.02966 28.358 11.73C28.358 15.4303 25.3221 18.43 21.5773 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#ED0006"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68801 18.6369 7.85941 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5772 5.02997C25.3221 5.02997 28.3579 8.02966 28.3579 11.73C28.3579 15.4303 25.3221 18.43 21.5772 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#F9A000"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68804 18.6369 7.85945 17.179 6.63054C15.7211 7.85945 14.7966 9.68804 14.7966 11.73C14.7966 13.7719 15.7211 15.6005 17.179 16.8294Z" fill="#FF5E00"/>
      </svg>
      <label class="input__label" for="input-number">
         <span>Label</span>
      </label>
   </div>
   <span class="input__info">Information message</span>
</div>


<!-- Para deixar o input como inválido (borda vermelha) adicione a classe 'invalid' na tag <input>.
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <div class="input__box invalid">
      <input type="number" name="input-number" id="input-number" placeholder="example"/>
      <svg width="34" height="24" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" fill="white"/>
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" stroke="#E6E6E6"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C15.9949 17.8275 14.459 18.43 12.7807 18.43C9.03582 18.43 6 15.4303 6 11.73C6 8.02966 9.03582 5.02997 12.7807 5.02997C14.459 5.02997 15.9949 5.63247 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5773 5.02997C25.3221 5.02997 28.358 8.02966 28.358 11.73C28.358 15.4303 25.3221 18.43 21.5773 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#ED0006"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68801 18.6369 7.85941 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5772 5.02997C25.3221 5.02997 28.3579 8.02966 28.3579 11.73C28.3579 15.4303 25.3221 18.43 21.5772 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#F9A000"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68804 18.6369 7.85945 17.179 6.63054C15.7211 7.85945 14.7966 9.68804 14.7966 11.73C14.7966 13.7719 15.7211 15.6005 17.179 16.8294Z" fill="#FF5E00"/>
      </svg>
      <label class="input__label" for="input-number">
         <span>Label</span>
      </label>
   </div>
   <span class="input__info">Information message</span>
</div>

-->

<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="example" disabled/>
      <svg width="34" height="24" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" fill="white"/>
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" stroke="#E6E6E6"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C15.9949 17.8275 14.459 18.43 12.7807 18.43C9.03582 18.43 6 15.4303 6 11.73C6 8.02966 9.03582 5.02997 12.7807 5.02997C14.459 5.02997 15.9949 5.63247 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5773 5.02997C25.3221 5.02997 28.358 8.02966 28.358 11.73C28.358 15.4303 25.3221 18.43 21.5773 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#ED0006"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68801 18.6369 7.85941 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5772 5.02997C25.3221 5.02997 28.3579 8.02966 28.3579 11.73C28.3579 15.4303 25.3221 18.43 21.5772 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#F9A000"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68804 18.6369 7.85945 17.179 6.63054C15.7211 7.85945 14.7966 9.68804 14.7966 11.73C14.7966 13.7719 15.7211 15.6005 17.179 16.8294Z" fill="#FF5E00"/>
      </svg>
      <label class="input__label" for="input-number">
         <span>Label</span>
      </label>
   </div>
   <span class="input__info">Information message</span>
</div>

-->

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__box {
  width: 100%;
  height: 56px;
  border-radius: 4px;
  position: relative;
}

.input__box input {
  width: calc(100% - 74px);
  height: 20px;
  position: absolute;
  left: 58px;
  bottom: 9.5px;
  z-index: 2;
  border: none;
  outline: none;
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 400;
  color: #2C2C2C;
}

.input__box svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.input__label {
  width: 100%;
  height: 56px;
  background-color: white;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  cursor: text;
  position: absolute;
  top: 0;
  left: 0;
}

.input__label span {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
  position: absolute;
  z-index: 3;
  left: 58px;
  top: 18px;
  transition: all linear 0.5s;
}

.input__box input:focus~.input__label span,
.input__box input:not(:placeholder-shown)~.input__label span {
  font-size: 12px;
  line-height: 16.8px;
  color: #8E8E8E;
  top: 9.5px;
}

.input__box:hover .input__label {
  border-color: #A7A7A7;
}

.input__box:hover .input__label span{
  color: #434343;
}

.input__box input:focus~.input__label {
  border: 1px solid #01141E;
}

.input__box input::placeholder {
  opacity: 0;
}

.input__box input:not(:placeholder-shown):not(:focus)~.input__label {
  border-color: #A7A7A7;
}

.input__info {
  font-size: 12px;
  line-height: 16.8px;
  font-weight: 400;
  color: #757575;
}

.input__box.invalid .input__label {
  border: 1px solid #FF3939;
}

.input__box.invalid input:focus~.input__label {
  border: 1px solid #FF3939;
}

.input__box.invalid input:not(:focus)~.input__label {
  border-color: #FF3939;
}

.input__box.invalid+.input__info {
  color: #FF3939 !important;
}

.input__box input:disabled~.input__label,
.input__box input:disabled~.input__label span,
.input__box input:disabled {
  cursor: not-allowed;
  color: #8E8E8E;
  background-color: #F5F5F5;
}

.input__box input:disabled+svg {
  cursor: not-allowed;
}

Input secundário para cartão de crédito com ícone de informações e mensagem de erro

Preview

HTML

<div class="input__container">
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="example"/>
      <svg width="34" height="24" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" fill="white"/>
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" stroke="#E6E6E6"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C15.9949 17.8275 14.459 18.43 12.7807 18.43C9.03582 18.43 6 15.4303 6 11.73C6 8.02966 9.03582 5.02997 12.7807 5.02997C14.459 5.02997 15.9949 5.63247 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5773 5.02997C25.3221 5.02997 28.358 8.02966 28.358 11.73C28.358 15.4303 25.3221 18.43 21.5773 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#ED0006"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68801 18.6369 7.85941 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5772 5.02997C25.3221 5.02997 28.3579 8.02966 28.3579 11.73C28.3579 15.4303 25.3221 18.43 21.5772 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#F9A000"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68804 18.6369 7.85945 17.179 6.63054C15.7211 7.85945 14.7966 9.68804 14.7966 11.73C14.7966 13.7719 15.7211 15.6005 17.179 16.8294Z" fill="#FF5E00"/>
      </svg>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
      <label class="input__label" for="input-number">
         <span>Label</span>
      </label>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>


<!-- Para deixar o input como inválido (borda vermelha e mensagem) adicione a classe 'invalid' na tag <div> juntamente com a classe "input__box".
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <div class="input__box invalid">
      <input type="number" name="input-number" id="input-number" placeholder="example"/>
      <svg width="34" height="24" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" fill="white"/>
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" stroke="#E6E6E6"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C15.9949 17.8275 14.459 18.43 12.7807 18.43C9.03582 18.43 6 15.4303 6 11.73C6 8.02966 9.03582 5.02997 12.7807 5.02997C14.459 5.02997 15.9949 5.63247 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5773 5.02997C25.3221 5.02997 28.358 8.02966 28.358 11.73C28.358 15.4303 25.3221 18.43 21.5773 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#ED0006"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68801 18.6369 7.85941 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5772 5.02997C25.3221 5.02997 28.3579 8.02966 28.3579 11.73C28.3579 15.4303 25.3221 18.43 21.5772 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#F9A000"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68804 18.6369 7.85945 17.179 6.63054C15.7211 7.85945 14.7966 9.68804 14.7966 11.73C14.7966 13.7719 15.7211 15.6005 17.179 16.8294Z" fill="#FF5E00"/>
      </svg>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
      <label class="input__label" for="input-number">
         <span>Label</span>
      </label>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->

<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <div class="input__box">
      <input type="number" name="input-number" id="input-number" placeholder="example" disabled/>
      <svg width="34" height="24" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" fill="white"/>
         <rect x="0.5" y="0.5" width="33" height="23" rx="3.5" stroke="#E6E6E6"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C15.9949 17.8275 14.459 18.43 12.7807 18.43C9.03582 18.43 6 15.4303 6 11.73C6 8.02966 9.03582 5.02997 12.7807 5.02997C14.459 5.02997 15.9949 5.63247 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5773 5.02997C25.3221 5.02997 28.358 8.02966 28.358 11.73C28.358 15.4303 25.3221 18.43 21.5773 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#ED0006"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68801 18.6369 7.85941 17.179 6.63051C18.363 5.63247 19.8989 5.02997 21.5772 5.02997C25.3221 5.02997 28.3579 8.02966 28.3579 11.73C28.3579 15.4303 25.3221 18.43 21.5772 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8294Z" fill="#F9A000"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M17.179 16.8294C18.6369 15.6005 19.5614 13.7719 19.5614 11.73C19.5614 9.68804 18.6369 7.85945 17.179 6.63054C15.7211 7.85945 14.7966 9.68804 14.7966 11.73C14.7966 13.7719 15.7211 15.6005 17.179 16.8294Z" fill="#FF5E00"/>
      </svg>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8.00001 14.6667C4.31801 14.6667 1.33334 11.682 1.33334 8.00004C1.33334 4.31804 4.31801 1.33337 8.00001 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00001 14.6667ZM8.00001 13.3334C9.4145 13.3334 10.7711 12.7715 11.7712 11.7713C12.7714 10.7711 13.3333 9.41453 13.3333 8.00004C13.3333 6.58555 12.7714 5.229 11.7712 4.2288C10.7711 3.22861 9.4145 2.66671 8.00001 2.66671C6.58552 2.66671 5.22897 3.22861 4.22877 4.2288C3.22858 5.229 2.66668 6.58555 2.66668 8.00004C2.66668 9.41453 3.22858 10.7711 4.22877 11.7713C5.22897 12.7715 6.58552 13.3334 8.00001 13.3334ZM7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337Z" fill="black"/>
      </svg>
      <label class="input__label" for="input-number">
         <span>Label</span>
      </label>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__box {
  width: 100%;
  height: 56px;
  border-radius: 4px;
  position: relative;
}

.input__box input {
  width: calc(100% - 100px);
  height: 20px;
  position: absolute;
  left: 58px;
  bottom: 9.5px;
  z-index: 2;
  border: none;
  outline: none;
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 400;
  color: #2C2C2C;
}

.input__box svg:first-of-type {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.input__box svg:nth-of-type(2) {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.input__label {
  width: 100%;
  height: 56px;
  background-color: white;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  cursor: text;
  position: absolute;
  top: 0;
  left: 0;
}

.input__label span {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #5C5C5C;
  position: absolute;
  z-index: 3;
  left: 58px;
  top: 18px;
  transition: all linear 0.5s;
}

.input__box input:focus~.input__label span,
.input__box input:not(:placeholder-shown)~.input__label span {
  font-size: 12px;
  line-height: 16.8px;
  color: #8E8E8E;
  top: 9.5px;
}

.input__box:hover .input__label {
  border-color: #A7A7A7;
}

.input__box:hover .input__label span{
  color: #434343;
}

.input__box input:focus~.input__label {
  border: 1px solid #01141E;
}

.input__box input::placeholder {
  opacity: 0;
}

.input__box input:not(:placeholder-shown):not(:focus)~.input__label {
  border-color: #A7A7A7;
}

.input__info-invalid {
  font-size: 12px;
  line-height: 16.8px;
  font-weight: 400;
  color: #FF3939;
  display: none;
}

.input__box.invalid+.input__info-invalid {
  display: block;
}

.input__box.invalid .input__label {
  border: 1px solid #FF3939;
}

.input__box.invalid input:focus~.input__label {
  border: 1px solid #FF3939;
}

.input__box.invalid input:not(:focus)~.input__label {
  border-color: #FF3939;
}

.input__box input:disabled~.input__label,
.input__box input:disabled~.input__label span,
.input__box input:disabled {
  cursor: not-allowed;
  color: #8E8E8E;
  background-color: #F5F5F5;
}

.input__box input:disabled ~ svg {
  cursor: not-allowed;
}

Input textarea básico com mensagem de erro

Preview

HTML

<div class="input__container">
   <label class="input__label">Description</label>
   <div class="input__box">
      <textarea id="text-area" name="text-area" maxlength="200" data-maxlength="200" placeholder="Write something about yourself..."></textarea>
      <div class="text-area__counter">0/200</div>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>


<!-- Para deixar o textarea como inválido (borda vermelha e mensagem) adicione a classe 'invalid' na tag <div> juntamente com a classe "input__box".
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <label class="input__label">Description</label>
   <div class="input__box invalid">
      <textarea id="text-area" name="text-area" maxlength="200" data-maxlength="200" placeholder="Write something about yourself..."></textarea>
      <div class="text-area__counter">0/200</div>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->


<!-- Para desabilitar o textarea adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <label class="input__label">Description</label>
   <div class="input__box">
      <textarea id="text-area" name="text-area" maxlength="200" data-maxlength="200" placeholder="Write something about yourself..." disabled></textarea>
      <div class="text-area__counter">0/200</div>
   </div>
   <span class="input__info-invalid">Information message</span>
</div>

-->

<script>
   const textAreas = document.querySelectorAll('.input__container textarea');

   textAreas.forEach(textArea => {
      const counter = textArea.parentElement.querySelector('.text-area__counter');
      textArea.addEventListener('input', function() {
         counter.textContent = textArea.value.length + '/200';
      });
   })
</script>

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__label{
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
}

.input__box{
  position: relative;
  width: 100%;
  height: auto;
  min-height: 61px;
}

.input__box textarea {
  position: absolute;
  left: 12px;
  top: 8px;
  z-index: 2;
  resize: none;
  width: calc(100% - 24px);
  height: 20px;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #2C2C2C;
}

.input__box textarea::placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #757575;
}

.text-area__counter {
  width: 100%;
  height: 100%;
  padding: 8px 12px;
  position: absolute;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  background-color: #fff;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  color: #8E8E8E;
  cursor: default;
}

.input__box:hover .text-area__counter{
  border-color: #A7A7A7;
}

.input__box textarea:focus ~ .text-area__counter {
  border: 1.5px solid #01141E;
}

.input__box textarea:not(:placeholder-shown):not(:focus) ~ .text-area__counter{
  border: 1px solid #434343;
}

.input__info-invalid {
  font-size: 12px;
  line-height: 16.8px;
  font-weight: 400;
  color: #FF3939;
  display: none;
}

.input__box.invalid + .input__info-invalid {
  display: block;
}

.input__box.invalid .text-area__counter{
  border: 1px solid #FF3939;
}

.input__box.invalid textarea:focus + .text-area__counter {
  border: 1px solid #FF3939;
}

.input__box.invalid textarea:not(:focus) + .text-area__counter {
  border-color: #FF3939;
}

.input__box textarea:disabled + .text-area__counter,
.input__box textarea:disabled,
.input__box textarea:disabled::placeholder {
  color: #8E8E8E;
  cursor: not-allowed;
  background-color: #F5F5F5;
}

Input textarea secundário com mensagem de erro

Preview

HTML

<div class="input__container">
   <div class="input__box">
      <textarea id="text-area" name="text-area" maxlength="200" data-maxlength="200" placeholder="dontremove"></textarea>
      <label class="input__label" for="text-area">Description</label>
   </div>
   <div class="input__base">
      <span class="input__info-invalid">Information message</span>
      <div class="text-area__counter">0/200</div>
   </div>
</div>


<!-- Para deixar o textarea como inválido (borda vermelha e mensagem) adicione a classe 'invalid' na tag <div> juntamente com a classe "input__box".
     Você poderá criar uma regra específica para que exista a adição dessa classe de acordo com suas necessidades:

<div class="input__container">
   <div class="input__box invalid">
      <textarea id="text-area" name="text-area" maxlength="200" data-maxlength="200" placeholder="dontremove"></textarea>
      <label class="input__label" for="text-area">Description</label>
   </div>
   <div class="input__base">
      <span class="input__info-invalid">Information message</span>
      <div class="text-area__counter">0/200</div>
   </div>
</div>

-->


<!-- Para desabilitar o textarea adicione o atributo 'disabled' na tag <input>: 

<div class="input__container">
   <div class="input__box">
      <textarea id="text-area" name="text-area" maxlength="200" data-maxlength="200" placeholder="dontremove" disabled></textarea>
      <label class="input__label" for="text-area">Description</label>
   </div>
   <div class="input__base">
      <span class="input__info-invalid">Information message</span>
      <div class="text-area__counter">0/200</div>
   </div>
</div>

-->

<script>
    const textAreas = document.querySelectorAll('.input__container textarea');

    textAreas.forEach(textArea => {
        const counter = textArea.closest('.input__container').querySelector('.text-area__counter');
        textArea.addEventListener('input', function() {
            counter.textContent = textArea.value.length + '/200';
        });
    });
</script>

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__box{
  position: relative;
  width: 100%;
  height: 72px;
}

.input__label {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #fff;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
  transition: all linear 0.5s;
}

.input__box textarea {
  position: absolute;
  left: 16px;
  top: 23px;
  z-index: 2;
  resize: none;
  width: calc(100% - 32px);
  height: 40px;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #2C2C2C;
  background-color: transparent;
}

.input__box textarea::placeholder {
  opacity: 0;
}

.input__box:hover .input__label{
  border-color: #A7A7A7;
}

.input__box textarea:focus ~ .input__label {
  border: 1.5px solid #01141E;
  font-size: 12px;
  line-height: 16.8px;
  color: #8E8E8E;
}

.input__box textarea:not(:placeholder-shown):not(:focus) + .input__label{
  border: 1px solid #434343;
  font-size: 12px;
  line-height: 16.8px;
  color: #8E8E8E;
}

.input__base{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: auto;
}

.input__info-invalid {
  font-size: 12px;
  line-height: 16.8px;
  font-weight: 400;
  color: #FF3939;
  display: none;
}

.text-area__counter {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  color: #8E8E8E;
  cursor: default;
}

.input__box.invalid ~ .input__base .input__info-invalid {
  display: block;
}

.input__box.invalid .input__label{
  border: 1px solid #FF3939;
}

.input__box.invalid textarea:focus + .input__label {
  border: 1px solid #FF3939;
}

.input__box.invalid textarea:not(:focus) + .input__label {
  border-color: #FF3939;
}

.input__box textarea:disabled + .input__label,
.input__box textarea:disabled::placeholder {
  color: #8E8E8E;
  cursor: not-allowed;
  background-color: #F5F5F5;
}

.input__box textarea:disabled{
  cursor: not-allowed;
}

Input select básico

Preview

HTML

<div class="input__container">
   <label class="input__label">Select</label>
   <div class="input__box">
      <select class="input__select" id="input-select">
         <option value="0">Option</option>
         <option value="1">Option 1</option>
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
      </select>
      <svg class="input__arrow">
         <use xlink:href="#select-arrow-down"></use>
      </svg>
      <svg class="sprites">
         <symbol id="select-arrow-down" viewbox="0 0 10 6">
            <polyline points="1 1 5 5 9 1"></polyline>
         </symbol>
      </svg>
   </div>
</div>

<!-- Para desabilitar o select adicione o atributo 'disabled' na tag <select>: 

<div class="input__container">
   <label class="input__label">Select</label>
   <div class="input__box">
      <select class="input__select" id="input-select" disabled>
         <option value="0" selected>Option</option>
         <option value="1">Option 1</option>
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
      </select>
      <svg class="input__arrow">
         <use xlink:href="#select-arrow-down"></use>
      </svg>
      <svg class="sprites">
         <symbol id="select-arrow-down" viewbox="0 0 10 6">
            <polyline points="1 1 5 5 9 1"></polyline>
         </symbol>
      </svg>
   </div>
</div>

-->

<script>
   var selects = document.querySelectorAll('.input__select');

   selects.forEach(function(select) {
      select.addEventListener('change', function() {
         this.blur();
         if (select.value !== '0') {
            select.classList.add('selected');
         } else {
            select.classList.remove('selected');
         }
      });
   });
</script>

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__label{
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
}

.input__box{
  width: 100%;
  height: auto;
  background-color: #fff;
  border-radius: 4px;
  position: relative;
}

.input__select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  padding: 8px 12px;
  width: 100%;
  height: 44px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #757575;
  cursor: pointer;
}

.input__select.selected{
  color: #434343;
  border-color: #434343;
}

.input__select:hover{
  color: #757575;
  border: 1px solid #A7A7A7;
}

.input__select:focus{
  color: #2C2C2C;
  border: 1.5px solid #01141E;
}

.input__arrow {
  position: absolute;
  right: 14px;
  top: 19px;
  width: 10px;
  height: 6px;
  stroke-width: 1.5px;
  stroke: #000000;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: all linear 0.5s;
}

.input__select:focus-visible + .input__arrow {
  transform: rotate(-180deg);
}

.sprites {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  user-select: none;
}

.input__select:disabled{
  background-color: #F5F5F5;
  border: 1px solid #E6E6E6;
  color: #8E8E8E;
  cursor: not-allowed;
}

.input__select:disabled + .input__arrow{
  stroke: #8E8E8E;
}

Input select secundário

Preview

HTML

<div class="input__container">
   <div class="input__box">
      <select class="input__select" id="input-select">
         <option value="0">Option</option>
         <option value="1">Option 1</option>
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
      </select>
      <label class="input__label">Select</label>
      <svg class="input__arrow">
         <use xlink:href="#select-arrow-down"></use>
      </svg>
      <svg class="sprites">
         <symbol id="select-arrow-down" viewbox="0 0 10 6">
            <polyline points="1 1 5 5 9 1"></polyline>
         </symbol>
      </svg>
   </div>
</div>

<!-- Para desabilitar o select adicione o atributo 'disabled' na tag <select>: 

<div class="input__container">
   <div class="input__box">
      <select class="input__select" id="input-select" disabled>
         <option value="0">Option</option>
         <option value="1">Option 1</option>
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
      </select>
      <label class="input__label">Select</label>
      <svg class="input__arrow">
         <use xlink:href="#select-arrow-down"></use>
      </svg>
      <svg class="sprites">
         <symbol id="select-arrow-down" viewbox="0 0 10 6">
            <polyline points="1 1 5 5 9 1"></polyline>
         </symbol>
      </svg>
   </div>
</div>

-->

<script>
   var selects = document.querySelectorAll('.input__select');

   selects.forEach(function(select) {
      select.addEventListener('change', function() {
         this.blur();
         if (select.value !== '0') {
            select.classList.add('selected');
         } else {
            select.classList.remove('selected');
         }
      });
   });
</script>

CSS

.input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
}

.input__label{
  display: flex;
  position: absolute;
  left: 16px;
  top: 18px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #5C5C5C;
  background-color: #fff;
  z-index: 2;
  transition: all linear 0.5s;
}

.input__box{
  width: 100%;
  height: 56px;
  padding: 8px 16px;
  background-color: #fff;
  border-radius: 4px;
  position: relative;
}

.input__select{
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  width: 100%;
  height: 56px;
  padding: 26.5px 16px 9.5px 16px;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #fff;
  background-color: transparent;
  cursor: pointer;
  transition: all linear 0.3s;
}

.input__select.selected{
  color: #2C2C2C;
  border-color: #A7A7A7;
}

.input__select:hover{
  border: 1px solid #A7A7A7;
}

.input__select:hover + .input__label{
  color: #434343;
}

.input__select:focus{
  color: #2C2C2C;
  border: 1.5px solid #01141E;
}

.input__select:focus + .input__label{
  top: 9.5px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  color: #8E8E8E;
}

.input__select.selected + .input__label{
  top: 9.5px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  color: #8E8E8E;
}

.input__arrow {
  position: absolute;
  right: 14px;
  top: 25px;
  width: 10px;
  height: 6px;
  stroke-width: 1.5px;
  stroke: #000000;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: all linear 0.5s;
}

.input__select:focus-visible ~ .input__arrow {
  transform: rotate(-180deg);
}

.sprites {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  user-select: none;
}

.input__select:disabled{
  background-color: #F5F5F5;
  border: 1px solid #E6E6E6;
  color: #F5F5F5;
  cursor: not-allowed;
}

.input__select:disabled + .input__arrow{
  stroke: #8E8E8E;
}

.input__select:disabled + .input__label {
  color: #8E8E8E;
  background-color: transparent;
  cursor: not-allowed;
}