input & textarea

ADMIN PANEL

Text Input

You can use input as code show bellow

<input type="text" placeholder="Type here" class="w-full max-w-xs bg-white border-none dark:bg-dark-dense input" />

Text Input color

You can use colored input by adding .input-(primary, secondary, success, warning, info, error) classes

 <input type="text" placeholder="Type here" class="w-full max-w-xs input input-primary" />

With Form-control and Labels

You can use input as code show bellow

 <div class="w-full max-w-xs form-control">
  <label class="flex justify-between px-1 py-2 label">
     <span class="label-text">What is your name?</span>
     <span class="label-text-alt">Alt label</span>
  </label>
  <input  type="text" placeholder="Type here" class="w-full max-w-xs bg-white border-none dark:bg-dark-dense input" />
  <label class="flex justify-between px-1 py-2 label">
     <span class="label-text-alt">Alt label</span>
     <span class="label-text-alt">Alt label</span>
  </label>
</div>

Text Input Different Size

You can use different size input by adding .input-(xs, sm, md, lg) classes

 <!-- xs -->
<input type="text" placeholder="Type here" class="w-full max-w-xs dark:bg-dark-dense input input-primary input-bordered input-xs" />

<!-- sm -->
<input type="text" placeholder="Type here" class="w-full max-w-xs dark:bg-dark-dense input input-secondary input-bordered input-sm" />

<!-- md -->
<input type="text" placeholder="Type here" class="w-full max-w-xs dark:bg-dark-dense input input-success input-bordered input-md" />

<!-- lg -->
<input type="text" placeholder="Type here" class="w-full max-w-xs dark:bg-dark-dense input input-warning input-bordered input-lg" />

Textarea

You can use textarea by adding

 <textarea class="bg-white border-none dark:bg-dark-dense textarea" placeholder="Bio"></textarea>                  

Textarea With Border

You can use textarea bordered by adding .textarea-bordered classes

 <textarea class="bg-white dark:bg-dark-dense textarea textarea-bordered" placeholder="Bio"></textarea>                  

Textarea Different colors

You can use different colors textarea by adding .textarea-(xs, sm, md, lg) classes

 <textarea class="border dark:bg-dark-dense textarea border-primary" placeholder="Bio"></textarea> 

With Form Control and Labels

You can use textarea as code show bellow

 <div class="form-control">
  <label class="label">
     <span class="label-text">Your bio</span>
     <span class="label-text-alt">Alt label</span>
  </label> 
  <textarea class="h-24 bg-white dark:bg-dark-dense textarea textarea-bordered" placeholder="Bio"></textarea>
  <label class="label">
     <span class="label-text-alt">Your bio</span>
     <span class="label-text-alt">Alt label</span>
  </label> 
</div>
Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Sidebar Type
    Choose Sidebar icon & full
Buy Now