Govo - Premium Admin Template

Basic Input

Here, the basic input component that you can use.

<form> 
  <div class="flex flex-col gap-3 form-group">
      <div class="flex flex-col gap-1"> 
          <label for="email2" class="text-xs font-medium text-primary">Email</label>
          <input type="email" id="email2"  placeholder="Enter your email id" class="p-[11px] dark:border-border-dark dark:bg-sidebar-dark2 w-full border border-border-light rounded-5 text-xs text-content"/>
      </div> 
      <div class="flex flex-col gap-1"> 
          <label for="password2" class="text-xs font-medium text-primary">Password</label>
          <input type="password" id="password2"  placeholder="Password" class="p-[11px] dark:border-border-dark dark:bg-sidebar-dark2 w-full border border-border-light rounded-5 text-xs text-content"/>
      </div> 
      <div class="flex flex-wrap gap-1"> 
          <button class="text-white btn btn-primary">Submit</button>
      </div> 
  </div> 
</form>

Basic Textarea

Here, the basic textarea component that you can use.

<form> 
  <div class="flex flex-col gap-2 form-group">
      <div class="flex flex-col gap-1"> 
          <label for="address" class="text-xs font-medium dark:bg-sidebar-dark2 text-primary ">Current Address </label>
          <textarea placeholder="Enter the address" id="address" class="dark:border-border-dark p-[11px] w-full border border-border-light rounded-5 text-xs text-content">
      </div>
      <div class="flex flex-col gap-1"> 
          <label for="address" class="text-xs font-medium dark:bg-sidebar-dark2 text-primary ">Permanent Address </label>
          <textarea placeholder="Enter the address" id="address1" class="dark:border-border-dark p-[11px] w-full border border-border-light rounded-5 text-xs text-content">
      </div> 
  </div> 
</form>

Sizes

To set the size of input you can add input-sm, input-ms and input-lg class.

<form> 
  <div class="flex flex-col gap-3 form-group">
      <div class="flex flex-col gap-1"> 
          <input type="text"  placeholder="input-sm" class="dark:bg-sidebar-dark2 dark:border-border-dark py-[0.35rem] px-[11px] text-[12px] w-full border border-border-light rounded-5 text-xs text-content"/>
      </div> 
      <div class="flex flex-col gap-1">
          <input type="text"  placeholder="input-md" class="dark:bg-sidebar-dark2 dark:border-border-dark p-[11px] w-full border border-border-light rounded-5 text-xs text-content"/>
      </div>
      <div class="flex flex-col gap-1">
          <input type="text"  placeholder="input-lg" class="dark:bg-sidebar-dark2 dark:border-border-dark py-[14px] px-[11px] w-full border border-border-light rounded-5 text-xs text-content"/>
      </div> 
  </div> 
</form>

Input Group

Add different label with input.

<form> 
  <div class="flex flex-col gap-3 form-group">
      <div class="flex flex-col gap-1">
          <div class="flex items-center justify-center"> 
             <input type="text" placeholder="Enter name" class="dark:bg-sidebar-dark2 dark:border-border-dark   p-[11px] w-full rounded-br-none rounded-tr-none border border-border-light rounded-5 text-xs text-content rtl:rounded-br-5 rtl:rounded-bl-none rtl:rounded-tr-5 rtl:rounded-tl-none"/>      
             <span class="flex items-center justify-center bg-primary text-white rounded-5 border-none rounded-br-none rounded-tr-none font-medium text-xs py-[13px] px-[11px] rtl:rounded-bl-5 rtl:rounded-br-none rtl:rounded-tr-none rtl:rounded-tl-5">Submit</span> 
          </div> 
      </div>
      <div class="flex flex-col gap-1">
          <div class="flex items-center justify-center"> 
             <span class="flex items-center justify-center bg-primary text-white rounded-5 border-none rounded-br-none rounded-tr-none font-medium text-xs py-[13px] px-[11px] rtl:rounded-bl-5 rtl:rounded-br-none rtl:rounded-tr-none rtl:rounded-tl-5">Price</span> 
             <input type="text" placeholder="15" class="dark:bg-sidebar-dark2 dark:border-border-dark  p-[11px] w-full rounded-none border border-border-light text-xs text-content"/>                                                    
             <span class="flex items-center justify-center bg-primary text-white rounded-5 border-none rounded-bl-none rounded-tl-none font-medium text-xs py-[13px] px-[11px] rtl:rounded-br-5 rtl:rounded-bl-none rtl:rounded-tr-5 rtl:rounded-tl-none">USD</span> 
          </div> 
      </div> 
      <div class="flex flex-col gap-1">
          <div class="flex items-center justify-center"> 
             <span class="flex items-center justify-center bg-primary text-white rounded-5 border-none rounded-br-none rounded-tr-none font-medium text-xs py-[13px] px-[11px] rtl:rounded-bl-5 rtl:rounded-br-none rtl:rounded-tr-none rtl:rounded-tl-5">https://</span> 
             <input type="text" placeholder="url" class="dark:bg-sidebar-dark2 dark:border-border-dark p-[11px] w-full rounded-none border border-border-light text-xs text-content"/>                                                    
             <span class="flex items-center justify-center bg-primary text-white rounded-5 border-none rounded-bl-none rounded-tl-none font-medium text-xs py-[13px] px-[11px] rtl:rounded-br-5 rtl:rounded-bl-none rtl:rounded-tr-5 rtl:rounded-tl-none">.com</span> 
          </div> 
      </div>   
   </div> 
</form>

Select Input

Set select input using select class.

<form> 
  <div class="flex flex-col gap-3 form-group">
      <select id="select-dept" class="dark:bg-sidebar-dark2 dark:border-border-dark  p-[11px] bg-white text-title border border-border-light rounded-5 w-full text-xs"> 
          <option>Web Designer</option> 
          <option>Web Developer</option> 
          <option>App Developer</option> 
      </select> 
   </div>    
</form>

With label

Adding labels with input.

<form> 
  <div class="flex flex-col gap-3 form-group">
      <div class="flex flex-col gap-1">
          <div class="flex items-center justify-center"> 
             <input type="text" placeholder="Type to search" class="dark:border-border-dark dark:bg-sidebar-dark2 p-[11px] rtl:rounded-bl-5 rtl:rounded-br-none rtl:rounded-tr-none rtl:rounded-tl-5 w-full rounded-5 rounded-br-none rounded-tr-none border border-border-light text-xs text-content"/>                                                    
             <span class="flex items-center justify-center bg-primary text-white rounded-5 border-none rounded-bl-none rounded-tl-none font-medium text-xs py-[12px] px-[11px] rtl:rounded-bl-5 rtl:rounded-br-none rtl:rounded-tr-none rtl:rounded-tl-5">
                 +SVG_ICON("Search", "w-5 h-5 stroke-white")
             </span> 
          </div> 
      </div>  
   </div> 
</form>

Disable Input

Add disable input using disable class.

<form> 
  <div class="flex flex-col gap-3 form-group">
      <div class="flex flex-col gap-1">
          <div class="flex items-center justify-center"> 
             <input type="text" placeholder="Leave a message" class="dark:bg-sidebar-dark2  dark:border-border-dark p-[11px] w-full rounded-none border border-border-light text-xs text-content" disabled="disabled" />                                                    
             <span class="flex items-center justify-center bg-primary text-white rounded-5 border-none rounded-bl-none rounded-tl-none font-medium text-xs py-[13px] px-[11px] rtl:rounded-bl-5 rtl:rounded-br-none rtl:rounded-tr-none rtl:rounded-tl-5">.com</span> 
          </div> 
      </div>  
   </div> 
</form>

With Input Group

You can set select input using select class.

<form> 
  <div class="flex flex-col gap-3 form-group">
      <select id="select-dept1" class="dark:bg-sidebar-dark2 dark:border-border-dark appearance-none p-[11px] bg-white text-title border border-border-light rounded-5 rounded-tr-none rounded-br-none w-full text-xs rtl:rounded-bl-5 rtl:rounded-br-none rtl:rounded-tr-none rtl:rounded-tl-5"> 
          <option>Select Item</option> 
          <option>T-shirts</option> 
          <option>Bottom Wear</option> 
          <option>Kitchen items</option> 
      </select> 
      <span class="flex items-center justify-center bg-primary text-white rounded-5 border-none rounded-bl-none rounded-tl-none font-medium text-xs py-[12px] px-[11px] rtl:rounded-bl-5 rtl:rounded-br-none rtl:rounded-tr-none rtl:rounded-tl-5">.com</span> 
   </div> 
</form>

Focused Input

Set Focused input using input-* class.

<form> 
  <div class="flex flex-col gap-3 form-group">
      <div class="flex flex-col gap-1">
          <div class="flex items-center justify-center"> 
             <input type="text" placeholder="Focused" class="p-[11px] w-full rounded-5 rounded-br-none rounded-tr-none border border-primary bg-primary-light text-xs text-content focus:border-1 focus:border-primary focus:bg-primary-light rtl:rounded-br-5 rtl:rounded-bl-none rtl:rounded-tr-5 rtl:rounded-tl-none"/>                                                    
             <span class="flex items-center justify-center bg-primary text-white rounded-5 border-none rounded-bl-none rounded-tl-none font-medium text-xs py-[12px] px-[11px] rtl:rounded-bl-5 rtl:rounded-br-none rtl:rounded-tr-none rtl:rounded-tl-5">Go</span> 
          </div> 
      </div>  
   </div> 
</form>

Hand crafted & made with

Customizer

Template Mode
Choose template mode dark & light
Layout Type
Choose layout Ltr & Rtl
Monochrome Mode

Input & Textarea

Unique Dashboard

Ecommerce Dashboard

Basic Input

Basic Textarea

Sizes

Input Group

Select Input

With label

Disable Input

With Input Group

Focused Input

Template Mode

Layout Type

Notification

Dmitriy Groshev

Sufiya Elija

Janis Evans

Mukrani Pabelo

Josephin Water

Janis Evans

Sufiya Elija

Messages

New Review Receive

Transaction $250 Success

Order Place Success

Netflix Subscription Expires

Congratulations You Won $2500

Latest Updates On You Phone

Cart Items(25)

Flower Pot

Iphone Max pro

Royal Party Glass

Water Proof Watch

Traveling Duffle Bag

Bag Total

Helen Walter

Unique Dashboard

Ecommerce Dashboard

Basic Input

Basic Textarea

Sizes

Input Group

Select Input

With label

Disable Input

With Input Group

Focused Input

Template Mode

Layout Type