Text Field

This is hint.
This field is required.
Field Validation is successful.
This field is required.
Field Validation is successful.
Copy 
   
   
<div class="row">
  <div class="mb-3 col-md-4">
  <label for="exampleFormControlInput1" class="form-label">Field Label (Default)</label>
  <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Placeholder">
</div>

<div class="mb-3 col-md-4">
  <label for="exampleFormControlInput1" class="form-label disabled">Field Label (Dissabled)</label>
  <input type="text" class="form-control no-drop" id="exampleFormControlInput1" placeholder="Placeholder" disabled=""> 
</div>


<div class="mb-3 col-md-4">
  <label for="exampleFormControlInput1" class="form-label">Vendor</label>
  <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Placeholder">
</div>

<div class="mb-3 col-md-4">
  <label for="exampleFormControlInput1" class="form-label">Field label (Mandatory/error)</label>
  <input type="text" class="form-control border-danger" id="exampleFormControlInput1" placeholder="Placeholder">
</div>

<div class="mb-3 col-md-4">
  <label for="exampleFormControlInput1" class="form-label">Field label</label>
  <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Placeholder">
  <div class="hint mt-1">This is hint.</div>
</div>


<div class="mb-3 col-md-4">
  <label for="exampleFormControlInput1" class="form-label">Field label</label>
  <input type="text" class="form-control border-danger" id="exampleFormControlInput1" placeholder="Placeholder">
  <div class="invalid-feedback"><span><img class="error-icon" src="assets/img/error-notify.svg"></span>This field is required.</div>
</div>

<div class="mb-3 col-md-4">
  <label for="exampleFormControlInput1" class="form-label">Field label</label>
  <input type="text" class="form-control border-success" id="exampleFormControlInput1" placeholder="Placeholder">
  <div class="success-feedback"><span><img class="error-icon" src="assets/img/success-icon.svg"></span>Field Validation is successful.</div>
</div>


 <div class="mb-3 col-md-4">
  <label for="exampleFormControlInput1" class="form-label">Field label</label>
  <input type="text" class="form-control icons border-danger" id="exampleFormControlInput1" placeholder="Placeholder">
  <div class="invalid-feedback"><span><img class="error-icon" src="assets/img/error-notify.svg"></span>This field is required.</div>
</div>

<div class="mb-3 col-md-4">
  <label for="exampleFormControlInput1" class="form-label">Field label</label>
  <input type="text" class="form-control icons border-success" id="exampleFormControlInput1" placeholder="Placeholder">
  <div class="success-feedback"><span><img class="error-icon" src="assets/img/success-icon.svg"></span>Field Validation is successful.</div>
</div>


<div class="mb-3 col-md-4 search-bar mt-2">
  <label for="exampleFormControlInput1" class="form-label">Field label</label>
  <form class="search-form d-flex align-items-center mb-3" method="POST" action="#">
      <input type="text" placeholder="Search for UI" title="search for UI">
     <button type="submit" title="Search"><i class="bi bi-search"></i></button>
  </form>
</div>






</div>
Copy 
   
   

   
      .form-control {
         color: #363431;
         font-size: 12px;
     }
     
     .form-control {
         display: block;
         width: 100%;
         padding: 0.375rem 0.75rem;
         font-size: 1rem;
         font-weight: 400;
         line-height: 1.5;
         color: #9D9D9B;
         background-color: #fff;
         background-clip: padding-box;
         border: 1.5px solid #DFE1E6;
         appearance: none;
         border-radius: 6px;
         transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
     }
     .form-label {
         margin-bottom: 0.5rem;
         color: #7A7A7A;
         font-weight: 600;
         font-size: 12px;
     }
     
     .form-label {
         margin-bottom: 0.5rem;
         color: #7A7A7A;
         font-weight: 600;
         font-size: 12px;
     }
     
     .border-danger {
         --bs-border-opacity: 1;
         border-color: rgba(var(--bs-danger-rgb),var(--bs-border-opacity))!important;
     }
         .invalid-feedback {
         display: block;
         font-size: 12px;
         color: #E33E16;
         font-weight: 500;
         padding-left: 3px;
     }
     
     .success-feedback {
         width: 100%;
         margin-top: 0.25rem;
         color: #1E9E46;
         font-size: 12px;
         font-weight: 500;
     }
     
     .search-form button {
         border: 0;
         padding: 0;
         margin-left: -30px;
         background: none;
     }