Form Elements

Input

Most common form control, text-based input fields. Includes support for all HTML5 types.

                    
                      <div class="mb-6">
                        <label for="exampleInput1" class="inline-block mb-2">Full Name</label>
                        <input type="text" class="w-full leading-5 relative py-2 px-4 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleInput1" placeholder="John Doe">
                      </div>
                      <div class="mb-6">
                        <label for="staticEmail" class="flex-shrink max-w-full w-full sm:w-1/6">Email Readonly</label>
                        <div class="flex-shrink max-w-full w-full sm:w-5/6">
                          <input type="text" readonly class="fw-full leading-5 relative py-3 rounded text-gray-800 bg-transparent border-0 border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0  dark:text-gray-300 dark:border-gray-700 dark:focus:border-gray-600" id="staticEmail" value="email@example.com">
                        </div>
                      </div>
                      <div class="mb-6">
                        <label for="exampleTextarea1" class="inline-block mb-2">Example textarea</label>
                        <textarea class="w-full leading-5 relative py-2 px-4 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleTextarea1" rows="3"></textarea>
                      </div>
                      <div class="mb-6">
                        <label for="exampleDataList" class="inline-block mb-2">Datalist example</label>
                        <input class="w-full leading-5 relative py-2 px-4 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
                        <datalist id="datalistOptions">
                          <option value="Burger">
                          <option value="Pizza">
                          <option value="Fried Rice">
                          <option value="Fried Chicken">
                          <option value="Kebab">
                        </datalist>
                      </div>
                      <div class="mb-6">
                        <label for="formFileMultiple" class="inline-block mb-2">Multiple files input example</label>
                        <input class="w-full leading-5 relative py-2 px-4 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" type="file" id="formFileMultiple" multiple>
                      </div>
                      <div class="mb-6">
                        <label for="exampleColorInput" class="inline-block mb-2">Color picker</label>
                        <input type="color" class="block w-10 h-10 leading-5 relative rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" style="max-width: 3rem" id="exampleColorInput" value="#1e40af" title="Choose your color">
                      </div>
                      <div class="mb-6">
                        <label for="exampleInput1" class="inline-block mb-2">Disabled input</label>
                        <input type="text" class="w-full leading-5 relative py-2 px-4 rounded text-gray-800 bg-gray-100 border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600 cursor-not-allowed" id="exampleInput1" placeholder="Disabled input" aria-label="Disabled input example" disabled>
                      </div>
                      <div class="mb-6">
                        <label for="exampleInput1" class="inline-block mb-2">Small</label>
                        <input type="text" class="w-full leading-5 relative text-sm py-2 px-4 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleInput1" placeholder="small">
                      </div>
                      <div class="mb-6">
                        <label for="exampleInput1" class="inline-block mb-2">Normal</label>
                        <input type="text" class="w-full leading-5 relative py-2 px-4 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleInput1" placeholder="normal">
                      </div>
                      <div class="mb-6">
                        <label for="exampleInput1" class="inline-block mb-2">Large</label>
                        <input type="text" class="w-full leading-5 relative text-2xl py-4 px-8 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleInput1" placeholder="large">
                      </div>

Select

Customize the native select with custom CSS that changes the element’s initial appearance.

                    
<div class="mb-6">
  <select class="inline-block w-full leading-5 relative py-2 pl-3 pr-8 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600 select-caret appearance-none" aria-label="Default select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
<div class="mb-6">
  <select class="inline-block w-full leading-5 relative py-2 pl-3 pr-8 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600 select-caret appearance-none cursor-not-allowed" aria-label="Disabled select example" disabled>
    <option selected>Disabled select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

Check and radio

Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.

                    
<div class="mb-6">
  <label class="flex items-center">
    <input type="checkbox" name="checked-demo" value="1" class="form-checkbox h-5 w-5 text-indigo-500 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded focus:outline-none ltr:mr-3 rtl:ml-3">
    <span>Checkbox</span>
  </label>
</div>
<div class="mb-6">
  <div class="flex flex-nowrap flex-row items-center mb-4">
    <input class="form-checkbox h-5 w-5 text-indigo-500 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 focus:outline-none rounded-full ltr:mr-3 rtl:ml-3" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
    <label class="inline-block" for="flexRadioDefault1">
      Default radio
    </label>
  </div>
  <div class="flex flex-nowrap flex-row items-center mb-4">
    <input class="form-checkbox h-5 w-5 text-indigo-500 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 focus:outline-none rounded-full ltr:mr-3 rtl:ml-3" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
    <label class="inline-block" for="flexRadioDefault2">
      Default checked radio
    </label>
  </div>
</div>
<div class="mb-6">
  <div class="relative w-8 py-3">
    <input title="Switch checkbox" type="checkbox" name="lightdarks" id="lightdarks" class="toggle-checkbox absolute block w-5 h-5 rounded-full bg-white dark:bg-gray-700 border-2 dark:border-gray-700 appearance-none cursor-pointer"/>
    <label for="lightdarks" class="toggle-label block overflow-hidden h-5 rounded-full bg-gray-300 dark:bg-gray-900 cursor-pointer"></label>
  </div>
</div>

Range

Use our custom range inputs for consistent cross-browser styling and built-in customization.

                    
<div class="mb-6">
  <label for="customRange1" class="inline-block">Example range</label>
  <input type="range" class="w-full h-6 py-1 bg-transparent focus:outline-none focus:ring-0" id="customRange1">
  <span class="block clear-both"></span>
</div>
<div class="mb-6">
  <label for="customRange2" class="inline-block">Disabled range</label>
  <input type="range" class="w-full h-6 py-1 bg-transparent focus:outline-none focus:ring-0 cursor-not-allowed" id="customRange2" disabled>
  <span class="block clear-both"></span>
</div>

Input group

Easily extend form by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

@
@example.com
https://example.com/users/
$ .00
@
With textarea 
                    
<div class="flex flex-wrap items-stretch w-full relative mb-6">
  <input type="email" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 px-4 ltr:rounded-l rtl:rounded-r text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" name="email" required="" placeholder="Enter you email address" aria-label="subcribe newsletter">
  <div class="flex -mr-px">
    <button class="flex items-center py-2 px-4 ltr:-ml-1 ltr:rounded-r rtl:-mr-1 rtl:rounded-l leading-5 text-gray-100 bg-indigo-500 border border-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0" type="submit">Subscribe</button>
  </div>
</div>

<div class="flex flex-wrap items-stretch w-full relative mb-6">
  <span class="flex items-center py-2 px-4 ltr:-mr-1 rtl:-ml-1 ltr:rounded-l rtl:rounded-r leading-5  bg-gray-100 border border-gray-300 dark:bg-gray-900 dark:border-gray-900" id="basic-addon1">@</span>
  <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 px-4 ltr:rounded-r rtl:rounded-l text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="flex flex-wrap items-stretch w-full relative mb-6">
  <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 px-4 ltr:rounded-l rtl:rounded-r text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <span class="flex items-center py-2 px-4 ltr:-ml-1 ltr:rounded-r rtl:-mr-1 rtl:rounded-l leading-5 bg-gray-100 border border-gray-300 dark:bg-gray-900 dark:border-gray-900" id="basic-addon2">@example.com</span>
</div>

<label for="basic-url" class="inline-block mb-2">Your vanity URL</label>
<div class="flex flex-wrap items-stretch w-full relative mb-6">
  <span class="flex items-center py-2 px-4 ltr:-mr-1 rtl:-ml-1 ltr:rounded-l rtl:rounded-r leading-5  bg-gray-100 border border-gray-300 dark:bg-gray-900 dark:border-gray-900" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 px-4 ltr:rounded-r rtl:rounded-l text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="basic-url" aria-describedby="basic-addon3">
</div>

<div class="flex flex-wrap items-stretch w-full relative mb-6">
  <span class="flex items-center py-2 px-4 ltr:-mr-1 rtl:-ml-1 ltr:rounded-l rtl:rounded-r leading-5  bg-gray-100 border border-gray-300 dark:bg-gray-900 dark:border-gray-900">$</span>
  <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 px-4 text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" aria-label="Amount (to the nearest dollar)">
  <span class="flex items-center py-2 px-4 ltr:-ml-1 ltr:rounded-r rtl:-mr-1 rtl:rounded-l leading-5 bg-gray-100 border border-gray-300 dark:bg-gray-900 dark:border-gray-900">.00</span>
</div>

<div class="flex flex-wrap items-stretch w-full relative mb-6">
  <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 px-4 ltr:rounded-l rtl:rounded-r text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" placeholder="Username" aria-label="Username">
  <span class="flex items-center py-2 px-4 -mx-1 ltr:rounded-l rtl:rounded-r leading-5 text-gray-700 dark:text-gray-300 bg-gray-100 border border-gray-300 dark:bg-gray-900 dark:border-gray-900">@</span>
  <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 px-4 ltr:rounded-r rtl:rounded-l text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" placeholder="Server" aria-label="Server">
</div>

<div class="flex flex-wrap items-stretch w-full relative mb-6">
  <span class="flex items-center py-2 px-4 ltr:-mr-1 rtl:-ml-1 ltr:rounded-l rtl:rounded-r leading-5  bg-gray-100 border border-gray-300 dark:bg-gray-900 dark:border-gray-900">With textarea</span>
  <textarea class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 px-4 ltr:rounded-r rtl:rounded-l text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" aria-label="With textarea"></textarea>
</div>