Regular Form

Pages

Users

Robert De Niro

robertdeniro@left4code.com

Leonardo DiCaprio

leonardodicaprio@left4code.com

Russell Crowe

russellcrowe@left4code.com

Denzel Washington

denzelwashington@left4code.com

Products

Nike Tanjun

Sport & Outdoor

Sony Master Series A9G

Electronic

Dell XPS 13

PC & Laptop

Sony Master Series A9G

Electronic

Input

Show example code

Input Text

Rounded

With Help

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

Password

Disabled

  HTMLOpenTagdivHTMLCloseTag HTMLOpenTaglabel for="regular-form-1" class="form-label"HTMLCloseTagInput TextHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="regular-form-1" type="text" class="form-control" placeholder="Input text"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabel for="regular-form-2" class="form-label"HTMLCloseTagRoundedHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="regular-form-2" type="text" class="form-control form-control-rounded" placeholder="Rounded"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabel for="regular-form-3" class="form-label"HTMLCloseTagWith HelpHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="regular-form-3" type="text" class="form-control" placeholder="With help"HTMLCloseTag HTMLOpenTagdiv class="form-help"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabel for="regular-form-4" class="form-label"HTMLCloseTagPasswordHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="regular-form-4" type="password" class="form-control" placeholder="Password"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabel for="regular-form-5" class="form-label"HTMLCloseTagDisabledHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="regular-form-5" type="text" class="form-control" placeholder="Disabled" disabledHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Input Sizing

Show example code

  HTMLOpenTaginput type="text" class="form-control form-control-lg" placeholder=".form-control-lg" aria-label=".form-control-lg example"HTMLCloseTag HTMLOpenTaginput type="text" class="form-control mt-2" placeholder="Default input" aria-label="default input example"HTMLCloseTag HTMLOpenTaginput type="text" class="form-control form-control-sm mt-2" placeholder=".form-control-sm" aria-label=".form-control-sm example"HTMLCloseTag

Input Groups

Show example code

.00

  HTMLOpenTagdiv class="input-group"HTMLCloseTag HTMLOpenTagdiv id="input-group-email" class="input-group-text"HTMLCloseTag@HTMLOpenTag/divHTMLCloseTag HTMLOpenTaginput type="text" class="form-control" placeholder="Email" aria-label="Email" aria-describedby="input-group-email"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="input-group mt-2"HTMLCloseTag HTMLOpenTaginput type="text" class="form-control" placeholder="Price" aria-label="Price" aria-describedby="input-group-price"HTMLCloseTag HTMLOpenTagdiv id="input-group-price" class="input-group-text"HTMLCloseTag.00HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="input-group mt-2"HTMLCloseTag HTMLOpenTagdiv class="input-group-text"HTMLCloseTag@HTMLOpenTag/divHTMLCloseTag HTMLOpenTaginput type="text" class="form-control" placeholder="Price" aria-label="Amount (to the nearest dollar)"HTMLCloseTag HTMLOpenTagdiv class="input-group-text"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 HTMLOpenTaglabel for="input-state-1" class="form-label"HTMLCloseTagInput SuccessHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="input-state-1" type="text" class="form-control border-theme-9" 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 HTMLOpenTaglabel for="input-state-2" class="form-label"HTMLCloseTagInput WarningHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="input-state-2" type="text" class="form-control border-theme-12" 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 HTMLOpenTaglabel for="input-state-3" class="form-label"HTMLCloseTagInput ErrorHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="input-state-3" type="text" class="form-control border-theme-6" 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 HTMLOpenTagselect class="form-select form-select-lg sm:mt-2 sm:mr-2" aria-label=".form-select-lg example"HTMLCloseTag HTMLOpenTagoptionHTMLCloseTagChris EvansHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTagLiam NeesonHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTagDaniel CraigHTMLOpenTag/optionHTMLCloseTag HTMLOpenTag/selectHTMLCloseTag HTMLOpenTagselect class="form-select mt-2 sm:mr-2" aria-label="Default select example"HTMLCloseTag HTMLOpenTagoptionHTMLCloseTagChris EvansHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTagLiam NeesonHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTagDaniel CraigHTMLOpenTag/optionHTMLCloseTag HTMLOpenTag/selectHTMLCloseTag HTMLOpenTagselect class="form-select form-select-sm mt-2" aria-label=".form-select-sm example"HTMLCloseTag HTMLOpenTagoptionHTMLCloseTagChris EvansHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTagLiam NeesonHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTagDaniel CraigHTMLOpenTag/optionHTMLCloseTag HTMLOpenTag/selectHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Vertical Form

Show example code

Password

Remember me

  HTMLOpenTagdivHTMLCloseTag HTMLOpenTaglabel for="vertical-form-1" class="form-label"HTMLCloseTagEmailHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="vertical-form-1" type="text" class="form-control" placeholder="example@gmail.com"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabel for="vertical-form-2" class="form-label"HTMLCloseTagPasswordHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="vertical-form-2" type="text" class="form-control" placeholder="secret"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="form-check mt-5"HTMLCloseTag HTMLOpenTaginput id="vertical-form-3" class="form-check-input" type="checkbox" value=""HTMLCloseTag HTMLOpenTaglabel class="form-check-label" for="vertical-form-3"HTMLCloseTagRemember meHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagbutton class="btn btn-primary mt-5"HTMLCloseTagLoginHTMLOpenTag/buttonHTMLCloseTag

Horizontal Form

Show example code

Password

Remember me

  HTMLOpenTagdiv class="form-inline"HTMLCloseTag HTMLOpenTaglabel for="horizontal-form-1" class="form-label sm:w-20"HTMLCloseTagEmailHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="horizontal-form-1" type="text" class="form-control" placeholder="example@gmail.com"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="form-inline mt-5"HTMLCloseTag HTMLOpenTaglabel for="horizontal-form-2" class="form-label sm:w-20"HTMLCloseTagPasswordHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="horizontal-form-2" type="password" class="form-control" placeholder="secret"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="form-check sm:ml-20 sm:pl-5 mt-5"HTMLCloseTag HTMLOpenTaginput id="horizontal-form-3" class="form-check-input" type="checkbox" value=""HTMLCloseTag HTMLOpenTaglabel class="form-check-label" for="horizontal-form-3"HTMLCloseTagRemember meHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="sm:ml-20 sm:pl-5 mt-5"HTMLCloseTag HTMLOpenTagbutton class="btn btn-primary"HTMLCloseTagLoginHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Inline Form

Show example code

  HTMLOpenTagdiv class="grid grid-cols-12 gap-2"HTMLCloseTag HTMLOpenTaginput type="text" class="form-control col-span-4" placeholder="Input inline 1" aria-label="default input inline 1"HTMLCloseTag HTMLOpenTaginput type="text" class="form-control col-span-4" placeholder="Input inline 2" aria-label="default input inline 2"HTMLCloseTag HTMLOpenTaginput type="text" class="form-control col-span-4" placeholder="Input inline 3" aria-label="default 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

Default switch checkbox input

  HTMLOpenTagdivHTMLCloseTag HTMLOpenTaglabelHTMLCloseTagVertical CheckboxHTMLOpenTag/labelHTMLCloseTag HTMLOpenTagdiv class="form-check mt-2"HTMLCloseTag HTMLOpenTaginput id="checkbox-switch-1" class="form-check-input" type="checkbox" value=""HTMLCloseTag HTMLOpenTaglabel class="form-check-label" for="checkbox-switch-1"HTMLCloseTagChris EvansHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="form-check mt-2"HTMLCloseTag HTMLOpenTaginput id="checkbox-switch-2" class="form-check-input" type="checkbox" value=""HTMLCloseTag HTMLOpenTaglabel class="form-check-label" for="checkbox-switch-2"HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="form-check mt-2"HTMLCloseTag HTMLOpenTaginput id="checkbox-switch-3" class="form-check-input" type="checkbox" value=""HTMLCloseTag HTMLOpenTaglabel class="form-check-label" for="checkbox-switch-3"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="form-check mr-2"HTMLCloseTag HTMLOpenTaginput id="checkbox-switch-4" class="form-check-input" type="checkbox" value=""HTMLCloseTag HTMLOpenTaglabel class="form-check-label" for="checkbox-switch-4"HTMLCloseTagChris EvansHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="form-check mr-2 mt-2 sm:mt-0"HTMLCloseTag HTMLOpenTaginput id="checkbox-switch-5" class="form-check-input" type="checkbox" value=""HTMLCloseTag HTMLOpenTaglabel class="form-check-label" for="checkbox-switch-5"HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="form-check mr-2 mt-2 sm:mt-0"HTMLCloseTag HTMLOpenTaginput id="checkbox-switch-6" class="form-check-input" type="checkbox" value=""HTMLCloseTag HTMLOpenTaglabel class="form-check-label" for="checkbox-switch-6"HTMLCloseTagDaniel CraigHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagSwitchHTMLOpenTag/labelHTMLCloseTag HTMLOpenTagdiv class="mt-2"HTMLCloseTag HTMLOpenTagdiv class="form-check"HTMLCloseTag HTMLOpenTaginput id="checkbox-switch-7" class="form-check-switch" type="checkbox"HTMLCloseTag HTMLOpenTaglabel class="form-check-label" for="checkbox-switch-7"HTMLCloseTagDefault switch checkbox inputHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag 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="form-check mt-2"HTMLCloseTag HTMLOpenTaginput id="radio-switch-1" class="form-check-input" type="radio" name="vertical_radio_button" value="vertical-radio-chris-evans"HTMLCloseTag HTMLOpenTaglabel class="form-check-label" for="radio-switch-1"HTMLCloseTagChris EvansHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="form-check mt-2"HTMLCloseTag HTMLOpenTaginput id="radio-switch-2" class="form-check-input" type="radio" name="vertical_radio_button" value="vertical-radio-liam-neeson"HTMLCloseTag HTMLOpenTaglabel class="form-check-label" for="radio-switch-2"HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="form-check mt-2"HTMLCloseTag HTMLOpenTaginput id="radio-switch-3" class="form-check-input" type="radio" name="vertical_radio_button" value="vertical-radio-daniel-craig"HTMLCloseTag HTMLOpenTaglabel class="form-check-label" for="radio-switch-3"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="form-check mr-2"HTMLCloseTag HTMLOpenTaginput id="radio-switch-4" class="form-check-input" type="radio" name="horizontal_radio_button" value="horizontal-radio-chris-evans"HTMLCloseTag HTMLOpenTaglabel class="form-check-label" for="radio-switch-4"HTMLCloseTagChris EvansHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="form-check mr-2 mt-2 sm:mt-0"HTMLCloseTag HTMLOpenTaginput id="radio-switch-5" class="form-check-input" type="radio" name="horizontal_radio_button" value="horizontal-radio-liam-neeson"HTMLCloseTag HTMLOpenTaglabel class="form-check-label" for="radio-switch-5"HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="form-check mr-2 mt-2 sm:mt-0"HTMLCloseTag HTMLOpenTaginput id="radio-switch-6" class="form-check-input" type="radio" name="horizontal_radio_button" value="horizontal-radio-daniel-craig"HTMLCloseTag HTMLOpenTaglabel class="form-check-label" for="radio-switch-6"HTMLCloseTagDaniel CraigHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Dark Mode