Regular Form

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="example@gmail.com"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="example@gmail.com"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