Text Input & Textarea

Text Input

You can use input as code show bellow 

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

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="input input-primary w-full max-w-xs" />

With Form-control and Labels

You can use input as code show bellow 

 <div class="form-control w-full max-w-xs">
  <label class="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="dark:bg-dark-dense input input-bordered w-full max-w-xs" />
  <label class="label">
     <span class="label-text-alt">Alt label</span>
     <span class="label-text-alt">Alt label</span>
  </label>
</div>

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="dark:bg-dark-dense textarea textarea-bordered h-24" placeholder="Bio"></textarea>
  <label class="label">
     <span class="label-text-alt">Your bio</span>
     <span class="label-text-alt">Alt label</span>
  </label> 
</div>

Textarea

You can use textarea by adding 

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

Textarea Different colors

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

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

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="dark:bg-dark-dense input input-primary input-bordered input-xs w-full max-w-xs" />

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

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

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

Copyright 2023 © Dexo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Sidebar Type
    Choose Sidebar icon & full
Reset Buy Now