Regular Form

Input

Show 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 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 code

.00

HTMLOpenTagdiv class="relative"HTMLCloseTag HTMLOpenTagdiv class="absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 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 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 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 border text-gray-600"HTMLCloseTag.00HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Input State

Show 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"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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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