Regular Form

Pages

Users

Johnny Depp

johnnydepp@left4code.com

Brad Pitt

bradpitt@left4code.com

Tom Cruise

tomcruise@left4code.com

Kevin Spacey

kevinspacey@left4code.com

Products

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