Regular Form

Pages

Users

Products

Samsung Galaxy S20 Ultra

Notifications

Al Pacino

01:10 PM

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem

Al Pacino

01:10 PM

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomi

Denzel Washington

01:10 PM

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomi

Denzel Washington

01:10 PM

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500

Al Pacino

05:09 AM

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem

Input

Show example code

Input Text

Rounded

With Help

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Password

Disabled

  HTMLOpenTagdivHTMLCloseTag HTMLOpenTaglabelHTMLCloseTagInput TextHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text" class="input w-full border mt-2" placeholder="Input text"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagRoundedHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text" class="input w-full rounded-full border mt-2" placeholder="Rounded"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagWith HelpHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text" class="input w-full border mt-2" placeholder="With help"HTMLCloseTag HTMLOpenTagdiv class="text-xs text-gray-600 mt-2"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagPasswordHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="password" class="input w-full border mt-2" placeholder="Password"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagDisabledHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text" class="input w-full border mt-2 bg-gray-100 cursor-not-allowed" placeholder="Disabled" disabledHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Input Sizing

Show example code

  HTMLOpenTaginput type="text" class="input input--sm w-full border" placeholder="Input small"HTMLCloseTag HTMLOpenTaginput type="text" class="input w-full border mt-2" placeholder="Input normal"HTMLCloseTag HTMLOpenTaginput type="text" class="input input--lg w-full border mt-2" placeholder="Input large"HTMLCloseTag

Input Groups

Show example code

.00

  HTMLOpenTagdiv class="relative"HTMLCloseTag HTMLOpenTagdiv class="absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600"HTMLCloseTag@HTMLOpenTag/divHTMLCloseTag HTMLOpenTaginput type="text" class="input pl-12 w-full border col-span-4" placeholder="Email"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="relative mt-2"HTMLCloseTag HTMLOpenTaginput type="text" class="input pr-12 w-full border col-span-4" placeholder="Price"HTMLCloseTag HTMLOpenTagdiv class="absolute top-0 right-0 rounded-r w-10 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600"HTMLCloseTag.00HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="relative mt-2"HTMLCloseTag HTMLOpenTagdiv class="absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600"HTMLCloseTag@HTMLOpenTag/divHTMLCloseTag HTMLOpenTaginput type="text" class="input px-12 w-full border col-span-4" placeholder="Price"HTMLCloseTag HTMLOpenTagdiv class="absolute top-0 right-0 rounded-r w-10 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600"HTMLCloseTag.00HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Input State

Show example code

Input Success

Strong password

Input Warning

Attempting to reconnect to server...

Input Error

This field is required

  HTMLOpenTagdivHTMLCloseTag HTMLOpenTaglabelHTMLCloseTagInput SuccessHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text" class="input w-full border border-theme-9 mt-2" placeholder="Input text"HTMLCloseTag HTMLOpenTagdiv class="w-full grid grid-cols-12 gap-4 h-1 mt-3"HTMLCloseTag HTMLOpenTagdiv class="col-span-3 h-full rounded bg-theme-9"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-3 h-full rounded bg-theme-9"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-3 h-full rounded bg-theme-9"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-3 h-full rounded bg-gray-200 dark:bg-dark-1"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-theme-9 mt-2"HTMLCloseTagStrong passwordHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagInput WarningHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text" class="input w-full border border-theme-12 mt-2" placeholder="Input text"HTMLCloseTag HTMLOpenTagdiv class="text-theme-12 mt-2"HTMLCloseTagAttempting to reconnect to server...HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagInput ErrorHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text" class="input w-full border border-theme-6 mt-2" placeholder="Input text"HTMLCloseTag HTMLOpenTagdiv class="text-theme-6 mt-2"HTMLCloseTagThis field is requiredHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Select Options

Show example code

  HTMLOpenTagdiv class="flex flex-col sm:flex-row items-center"HTMLCloseTag HTMLOpenTagdiv class="sm:mt-2"HTMLCloseTag HTMLOpenTagselect class="input input--sm border mr-2"HTMLCloseTag HTMLOpenTagoptionHTMLCloseTagChris EvansHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTagLiam NeesonHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTagDaniel CraigHTMLOpenTag/optionHTMLCloseTag HTMLOpenTag/selectHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-2"HTMLCloseTag HTMLOpenTagselect class="input border mr-2"HTMLCloseTag HTMLOpenTagoptionHTMLCloseTagChris EvansHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTagLiam NeesonHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTagDaniel CraigHTMLOpenTag/optionHTMLCloseTag HTMLOpenTag/selectHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-2"HTMLCloseTag HTMLOpenTagselect class="input input--lg border mr-2"HTMLCloseTag HTMLOpenTagoptionHTMLCloseTagChris EvansHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTagLiam NeesonHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTagDaniel CraigHTMLOpenTag/optionHTMLCloseTag HTMLOpenTag/selectHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Vertical Form

Show example code

Password

Remember me

  HTMLOpenTagdivHTMLCloseTag HTMLOpenTaglabelHTMLCloseTagEmailHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="email" class="input w-full border mt-2" placeholder="[email protected]"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagPasswordHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="password" class="input w-full border mt-2" placeholder="secret"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 dark:text-gray-500 mt-5"HTMLCloseTag HTMLOpenTaginput type="checkbox" class="input border mr-2" id="vertical-remember-me"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none" for="vertical-remember-me"HTMLCloseTagRemember meHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagbutton type="button" class="button bg-theme-1 text-white mt-5"HTMLCloseTagLoginHTMLOpenTag/buttonHTMLCloseTag

Horizontal Form

Show example code

Password

Remember me

  HTMLOpenTagdiv class="flex flex-col sm:flex-row items-center"HTMLCloseTag HTMLOpenTaglabel class="w-full sm:w-20 sm:text-right sm:mr-5"HTMLCloseTagEmailHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="email" class="input w-full border mt-2 flex-1" placeholder="[email protected]"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex flex-col sm:flex-row items-center mt-3"HTMLCloseTag HTMLOpenTaglabel class="w-full sm:w-20 sm:text-right sm:mr-5"HTMLCloseTagPasswordHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="password" class="input w-full border mt-2 flex-1" placeholder="secret"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 dark:text-gray-500 mt-5 sm:ml-20 sm:pl-5"HTMLCloseTag HTMLOpenTaginput type="checkbox" class="input border mr-2" id="horizontal-remember-me"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none" for="horizontal-remember-me"HTMLCloseTagRemember meHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="sm:ml-20 sm:pl-5 mt-5"HTMLCloseTag HTMLOpenTagbutton type="button" class="button bg-theme-1 text-white"HTMLCloseTagLoginHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Inline Form

Show example code

  HTMLOpenTagdiv class="grid grid-cols-12 gap-2"HTMLCloseTag HTMLOpenTaginput type="text" class="input w-full border col-span-4" placeholder="Input inline 1"HTMLCloseTag HTMLOpenTaginput type="text" class="input w-full border col-span-4" placeholder="Input inline 2"HTMLCloseTag HTMLOpenTaginput type="text" class="input w-full border col-span-4" placeholder="Input inline 3"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Checkbox & Switch

Show example code

Vertical Checkbox

Chris evans

Liam Neeson

Daniel Craig

Horizontal Checkbox

Chris evans

Liam Neeson

Daniel Craig

Switch

  HTMLOpenTagdivHTMLCloseTag HTMLOpenTaglabelHTMLCloseTagVertical CheckboxHTMLOpenTag/labelHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 dark:text-gray-500 mt-2"HTMLCloseTag HTMLOpenTaginput type="checkbox" class="input border mr-2" id="vertical-checkbox-chris-evans"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none" for="vertical-checkbox-chris-evans"HTMLCloseTagChris evansHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 dark:text-gray-500 mt-2"HTMLCloseTag HTMLOpenTaginput type="checkbox" class="input border mr-2" id="vertical-checkbox-liam-neeson"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none" for="vertical-checkbox-liam-neeson"HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 dark:text-gray-500 mt-2"HTMLCloseTag HTMLOpenTaginput type="checkbox" class="input border mr-2" id="vertical-checkbox-daniel-craig"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none" for="vertical-checkbox-daniel-craig"HTMLCloseTagDaniel CraigHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagHorizontal CheckboxHTMLOpenTag/labelHTMLCloseTag HTMLOpenTagdiv class="flex flex-col sm:flex-row mt-2"HTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 mr-2"HTMLCloseTag HTMLOpenTaginput type="checkbox" class="input border mr-2" id="horizontal-checkbox-chris-evans"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none" for="horizontal-checkbox-chris-evans"HTMLCloseTagChris evansHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 mr-2 mt-2 sm:mt-0"HTMLCloseTag HTMLOpenTaginput type="checkbox" class="input border mr-2" id="horizontal-checkbox-liam-neeson"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none" for="horizontal-checkbox-liam-neeson"HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 mr-2 mt-2 sm:mt-0"HTMLCloseTag HTMLOpenTaginput type="checkbox" class="input border mr-2" id="horizontal-checkbox-daniel-craig"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none" for="horizontal-checkbox-daniel-craig"HTMLCloseTagDaniel CraigHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagSwitchHTMLOpenTag/labelHTMLCloseTag HTMLOpenTagdiv class="mt-2"HTMLCloseTag HTMLOpenTaginput type="checkbox" class="input input--switch border"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Radio

Show example code

Vertical Radio Button

Chris evans

Liam Neeson

Daniel Craig

Horizontal Radio Button

Chris Evans

Liam Neeson

Daniel Craig

  HTMLOpenTagdivHTMLCloseTag HTMLOpenTaglabelHTMLCloseTagVertical Radio ButtonHTMLOpenTag/labelHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 dark:text-gray-500 mt-2"HTMLCloseTag HTMLOpenTaginput type="radio" class="input border mr-2" id="vertical-radio-chris-evans" name="vertical_radio_button" value="vertical-radio-chris-evans"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none" for="vertical-radio-chris-evans"HTMLCloseTagChris evansHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 dark:text-gray-500 mt-2"HTMLCloseTag HTMLOpenTaginput type="radio" class="input border mr-2" id="vertical-radio-liam-neeson" name="vertical_radio_button" value="vertical-radio-liam-neeson"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none" for="vertical-radio-liam-neeson"HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 dark:text-gray-500 mt-2"HTMLCloseTag HTMLOpenTaginput type="radio" class="input border mr-2" id="vertical-radio-daniel-craig" name="vertical_radio_button" value="vertical-radio-daniel-craig"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none" for="vertical-radio-daniel-craig"HTMLCloseTagDaniel CraigHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagHorizontal Radio ButtonHTMLOpenTag/labelHTMLCloseTag HTMLOpenTagdiv class="flex flex-col sm:flex-row mt-2"HTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 dark:text-gray-500 mr-2"HTMLCloseTag HTMLOpenTaginput type="radio" class="input border mr-2" id="horizontal-radio-chris-evans" name="horizontal_radio_button" value="horizontal-radio-chris-evans"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none" for="horizontal-radio-chris-evans"HTMLCloseTagChris EvansHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 dark:text-gray-500 mr-2 mt-2 sm:mt-0"HTMLCloseTag HTMLOpenTaginput type="radio" class="input border mr-2" id="horizontal-radio-liam-neeson" name="horizontal_radio_button" value="horizontal-radio-liam-neeson"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none" for="horizontal-radio-liam-neeson"HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 dark:text-gray-500 mr-2 mt-2 sm:mt-0"HTMLCloseTag HTMLOpenTaginput type="radio" class="input border mr-2" id="horizontal-radio-daniel-craig" name="horizontal_radio_button" value="horizontal-radio-daniel-craig"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none" for="horizontal-radio-daniel-craig"HTMLCloseTagDaniel CraigHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag