Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Robert De Niro
robertdeniro@left4code.com
Arnold Schwarzenegger
arnoldschwarzenegger@left4code.com
Russell Crowe
russellcrowe@left4code.com
Tom Cruise
tomcruise@left4code.com
Products
Dell XPS 13
PC & Laptop
Sony A7 III
Photography
Nike Air Max 270
Sport & Outdoor
Nike Air Max 270
Sport & Outdoor

## 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 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
@
.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-success" 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-success"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-3 h-full rounded bg-success"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-3 h-full rounded bg-success"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-3 h-full rounded bg-slate-100 dark:bg-darkmode-800"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-success 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-warning" placeholder="Input text"HTMLCloseTag HTMLOpenTagdiv class="text-warning 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-danger" placeholder="Input text"HTMLCloseTag HTMLOpenTagdiv class="text-danger 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
Email
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
Email
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 form-switch"HTMLCloseTag HTMLOpenTaginput id="checkbox-switch-7" class="form-check-input" 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