#### Form Inputs

#### Default Input

##### Default Input - View Code

          <form>
              <div class="form-group">
                  <input type="text" class="form-control">
              </div>
          </form>

To use add `form-control` class to the input

#### Input With Helper Text

##### Input With Helper Text - View Code

          <form>
              <div class="form-group">
                  <input type="text" class="form-control" id="nametext" aria-describedby="name" placeholder="Name">
                  <small id="name" class="form-text text-muted">Helper Text</small>
              </div>
          </form>

Helper Text

#### Password

##### Password - View Code

          <form>
              <div class="form-group">
                  <input type="password" class="form-control" id="passtext" placeholder="Password">
              </div>
          </form>

#### Disabled Input

##### Disabled Input - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="text" class="form-control" id="nametext1" placeholder="Name" disabled>
              </div>
          </form>

Add attribute `disabled` to disable input field.

######

#### Predefined Input Value

##### Predefined Input Value - View Code

          <form class="mt-2">
              <div class="form-group">
                  <input type="text" class="form-control" id="prenametext" value="Name">
              </div>
          </form>

Add attribute `value="VALUE"` to set predefined value.

#### Readonly Input Field

##### Readonly Input Field - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="text" class="form-control" id="readonly" placeholder="Readonly Text" readonly>
              </div>
          </form>

Add attribute `readonly` to set field readonly.

#### Input With Placeholder

##### Input With Placeholder - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="text" class="form-control" id="placeholder" placeholder="Placeholder Text">
              </div>
          </form>

Add attribute `placeholder="..."` to input area.

#### Maximum Value

##### Maximum Value - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="text" class="form-control" maxlength="6" id="maxval" aria-describedby="maxval" placeholder="Name">
              </div>
          </form>

Add attribute `maxlength="6"` to input area.

#### Minimum Value

##### Minimum Value - View Code

          <form class="mt-4">
            <div class="form-group">
              <input type="text" class="form-control" minlength="5" id="minval" aria-describedby="minval" placeholder="Name">
            </div>
          </form>

Add attribute `minlength="5"` to input area.

#### Input Type Options

#### Input Type Text

##### Input Type Text - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="text" class="form-control" value="Name">
              </div>
          </form>

Using `input type="text"`

#### Input Type Password

##### Input Type Password - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="password" class="form-control" value="Name">
              </div>
          </form>

Using `input type="password"`

#### Input Phone Number

##### Input Phone Number - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="tel" class="form-control" value="1-(444)-444-4445">
              </div>
          </form>

Using `input type="tel"`

#### Input Type Email

##### Input Type Email - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="email" class="form-control" value="[email protected]">
              </div>
          </form>

Using `input type="email"`

#### Input Type URL

##### Input Type URL - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="url" class="form-control" value="http://google.com">
              </div>
          </form>

Using `input type="url"`

#### Input Type Search

##### Input Type Search - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="search" class="form-control" value="how to...">
              </div>
          </form>

Using `input type="search"`

#### Input Type Numbers

##### Input Type Numbers - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="number" class="form-control" value="6029">
              </div>
          </form>

Using `input type="number"`

#### Input Type Date Time

##### Input Type Date Time - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="datetime-local" class="form-control" value="2008-05-13T22:33:00">
              </div>
          </form>

Using `input type="datetime-local"`

#### Input Type Date

##### Input Type Date - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="date" class="form-control" value="2018-05-13">
              </div>
          </form>

Using `input type="date"`

#### Input Type Time

##### Input Type Time - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="time" class="form-control" value="22:33:00">
              </div>
          </form>

Using `input type="time"`

#### Input Type Week

##### Input Type Week - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="week" class="form-control" value="2011-W33">
              </div>
          </form>

Using `input type="week"`

#### Input Type Month

##### Input Type Month - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="month" class="form-control" value="1999-08">
              </div>
          </form>

Using `input type="month"`

#### Input Type Color

##### Input Type Color - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="color" class="form-control" value="#563d7c">
              </div>
          </form>

Using `input type="color"`

#### Bootstrap Colorpicker

##### Bootstrap Colorpicker - View Code

          <form class="mt-4">
              <div class="form-group">
                  <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
              </div>
          </form>

Use `form-control-color` classs for bootstrap colorpicker

#### Input Type Range

##### Input Type Range - View Code

          <form class="mt-3">
              <div class="form-group">
                  <input type="range" class="form-range" id="customRange1">
              </div>
          </form>

Using `input type="range"`

#### General Textarea

#### Textarea

##### Textarea - View Code

          <form class="mt-3">
              <div class="form-group">
                  <textarea class="form-control" rows="3"></textarea>
              </div>
          </form>

#### Textarea With Placeholder

##### Textarea With Placeholder - View Code

          <form class="mt-3">
              <div class="form-group">
                  <textarea class="form-control" rows="3" placeholder="Text Here..."></textarea>
              </div>
          </form>

#### Textarea With Helper Text

##### Textarea With Helper Text - View Code

          <form>
              <div class="form-group">
                  <textarea class="form-control" rows="3" placeholder="Text Here..."></textarea>
                  <small id="textHelp" class="form-text text-muted">Helper Text</small>
              </div>
          </form>

Helper Text

#### Inline Checkboxes & Radios

#### Inline Default Checkbox

##### Inline Default Checkbox - View Code

          <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
              <label class="form-check-label" for="inlineCheckbox1">1</label>
          </div>
          <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
              <label class="form-check-label" for="inlineCheckbox2">2</label>
          </div>
          <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
              <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
          </div>

1
2
3 (disabled)

#### Inline Default Radio Button

##### Inline Default Radio Button - View Code

          <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
              <label class="form-check-label" for="inlineRadio1">1</label>
          </div>
          <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
              <label class="form-check-label" for="inlineRadio2">2</label>
          </div>
          <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
              <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
          </div>

1
2
3 (disabled)

#### Inline Custom Checkbox

##### Inline Custom Checkbox - View Code

          <div class="form-check-inline">
              <div class="form-check">
                  <input type="checkbox" class="form-check-input" id="customCheck1">
                  <label class="custom-" for="customCheck1">1</label>
              </div>
          </div>
          <div class="form-check-inline">
              <div class="form-check">
                  <input type="checkbox" class="form-check-input" id="customCheck2">
                  <label class="custom-" for="customCheck2">2</label>
              </div>
          </div>
          <div class="form-check-inline">
              <div class="form-check">
                  <input type="checkbox" class="form-check-input" id="customCheck3" disabled="">
                  <label class="custom-" for="customCheck3">3</label>
              </div>
          </div>

1
2
3

#### Inline Custom Radios

##### Inline Custom Radios - View Code

          <div class="form-check-inline">
              <div class="form-check">
                  <input type="radio" class="form-check-input" id="customControlValidation2" name="radio-stacked">
                  <label class="custom-" for="customControlValidation2">1</label>
              </div>
          </div>
          <div class="form-check-inline">
              <div class="form-check">
                  <input type="radio" class="form-check-input" id="customControlValidation3" name="radio-stacked">
                  <label class="custom-" for="customControlValidation3">2</label>
              </div>
          </div>
          <div class="form-check-inline">
              <div class="form-check">
                  <input type="radio" class="form-check-input" id="customControlValidation4" name="radio-stacked" disabled>
                  <label class="custom-" for="customControlValidation4">3</label>
              </div>
          </div>

1
2
3

#### General Select

#### Select

##### Select - View Code

          <form class="mt-4">
              <div class="form-group mb-4">
                  <label for="exampleFormControlSelect1">Select No</label>
                  <select class="form-control" id="exampleFormControlSelect1">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                  </select>
              </div>
          </form>

Select No

#### Form Select

##### Form Select - View Code

          <form>
              <div class="form-group mb-4">
                  <label class="mr-sm-2" for="inlineFormCustomSelect">Select</label>
                  <select class="form-select mr-sm-2" id="inlineFormCustomSelect">
                      <option selected>Choose...</option>
                      <option value="1">One</option>
                      <option value="2">Two</option>
                      <option value="3">Three</option>
                  </select>
              </div>
          </form>

To use add `.form-select` class

Select

#### Multiple Select

##### Multiple Select - View Code

          <form>
              <select multiple class="form-control" id="exampleFormControlSelect2">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
              </select>
          </form>

To use add `multiple` to the field

#### Select With Addons

##### Select With Addons - View Code

          <form>
              <div class="input-group mb-3">
                  <label class="input-group-text" for="inputGroupSelect01">Options</label>
                  <select class="form-select" id="inputGroupSelect01">
                      <option selected>Choose...</option>
                      <option value="1">One</option>
                      <option value="2">Two</option>
                      <option value="3">Three</option>
                  </select>
              </div>
          </form>

To use add `.input-group-prepend` class to the div

Options

#### Select With Buttons

##### Select With Buttons - View Code

          <form>
              <div class="input-group">
                  <select class="form-select" id="inputGroupSelect04">
                      <option selected>Choose...</option>
                      <option value="1">One</option>
                      <option value="2">Two</option>
                      <option value="3">Three</option>
                  </select>
                      <button class="btn btn-outline-secondary" type="button">Button</button>
              </div>
          </form>

To use add `.input-group-append` class to the div

#### File Upload

#### Default File Upload

##### Default File Upload - View Code

          <form class="mt-3">
              <input class="form-control" type="file" id="formFile">
          </form>

To use add `.form-control-file` class to the input

#### Disabled File Upload

##### Disabled File Upload - View Code

    <form>
      <div class="mb-3">
        <input class="form-control" type="file" id="formFileDisabled" disabled>
      </div>
    </form>

To use add `disabled` attr to the input

#### Small File Upload

##### Small File Upload - View Code

    <form class="mt-4">
      <input class="form-control form-control-sm" id="formFileSm" type="file">
    </form>

To use add `.form-control-sm` class to the div

#### Large File Upload

##### Large File Upload - View Code

    <form class="mt-4">
      <input class="form-control form-control-lg" id="formFileLg" type="file">
    </form>

To use add `.form-control-lg` class to the div

#### Different Style in Helper Text

#### Left Helper Text

##### Left Helper Text - View Code

          <form class="mt-3">
              <div class="form-group">
                  <input type="text" class="form-control" id="nametext2" aria-describedby="name" placeholder="Name">
                  <div class="d-flex justify-content-start">
                      <small id="name1" class="badge badge-default text-info  bg-info-subtle form-text">Helper Text</small>
                  </div>
              </div>
          </form>

To use add `justify-content-start` class to the text

Helper Text

#### Center Helper Text

##### Center Helper Text - View Code

          <form class="mt-3">
              <div class="form-group mb-0">
                  <input type="text" class="form-control" id="nametext4" aria-describedby="name" placeholder="Name">
                  <p class="text-center mb-0">
                      <small id="name45" class="badge badge-default text-warning  bg-warning-subtle form-text">Helper Text</small>
                  </p>
              </div>
          </form>

To use add `text-center` class to the text

Helper Text

#### Right Helper Text

##### Right Helper Text - View Code

          <form class="mt-3">
              <div class="form-group">
                  <input type="text" class="form-control" id="nametext12" aria-describedby="name" placeholder="Name">
                  <div class="d-flex justify-content-end">
                      <small id="name13" class="badge badge-default text-danger  bg-danger-subtle form-text">Helper Text</small>
                  </div>
              </div>
          </form>

To use add `justify-content-end` class to the text

Helper Text

#### Inline Helper Text

##### Inline Helper Text - View Code

          <form class="mt-3">
              <div class="row">
                  <div class="col-md-8">
                      <input type="text" class="form-control" id="helpInput10" placeholder="Helper Text">
                  </div>
                  <div class="col-md-4">
                      <small class="text-muted">Helper Text</small>
                  </div>
              </div>
          </form>

Helper Text

#### Inline Helper Text With Color

##### Inline Helper Text With Color - View Code

          <form class="mt-3">
            <div class="row">
                <div class="col-md-8">
                    <input type="text" class="form-control" id="helpInput11" placeholder="Help Text">
                </div>
                <div class="col-md-4 block-tag">
                    <small class="badge bg-success-subtle text-success ">Helper Text</small>
                </div>
            </div>
          </form>

Helper Text

#### Input With Validaton

#### Input With Success

##### Input With Success - View Code

          <form class="mt-3">
            <label class="form-" for="inputSuccess1">Input with success</label>
            <input type="text" class="form-control is-valid" id="inputSuccess1">
            <div class="valid-feedback">
                Success! You've done it.
            </div>
          </form>

To use add `is-valid` class to the input

Input with success
Success! You've done it.

#### Input With Danger

##### Input With Danger - View Code

          <form class="mt-3">
              <label class="form-" for="inputDanger1">Input with danger</label>
              <input type="text" class="form-control is-invalid" id="inputDanger1">
              <div class="invalid-feedback">
                  Sorry, that username's taken. Try another?
              </div>
          </form>

To use add `is-invalid` class to the input

Input with danger
Sorry, that username's taken. Try another?

#### Inline Input With Success

##### Inline Input With Success - View Code

          <form class="mt-3 form-horizontal">
              <form class="mt-3 form-horizontal">
              <div class="form-group row">
                  <label for="inputHorizontalSuccess" class="col-sm-2 col-form-label">Email</label>
                  <div class="col-sm-10">
                      <input type="email" class="form-control is-valid" id="inputHorizontalSuccess" placeholder="[email protected]">
                      <div class="valid-feedback">Success! You've done it.</div>
                  </div>
              </div>
          </form>

To use add `form-horizontal` class to the input

Email
Success! You've done it.

#### Inline Input With Danger

##### Inline Input With Danger - View Code

          <form class="mt-3 form-horizontal">
            <div class="form-group row">
                <label for="inputHorizontalDnger" class="col-sm-2 col-form-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control is-invalid" id="inputHorizontalDnger" placeholder="[email protected]">
                    <div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
                </div>
            </div>
          </form>

To use add `form-horizontal` class to the input

Email
Sorry, that username's taken. Try another?

#### Input With Tooltip

#### Tooltip Bottom

##### Tooltip Bottom - View Code

          <form class="mt-3">
              <input type="text" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom" class="form-control" placeholder="Bottom">
          </form>

#### Tooltip Right

##### Tooltip Right - View Code

          <form class="mt-3">
              <input type="text" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right" class="form-control" placeholder="Right">
          </form>

#### Tooltip Top

##### Tooltip Top - View Code

          <form class="mt-3">
              <input type="text" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top" class="form-control" placeholder="Top">
          </form>

#### Tooltip Left

##### Tooltip Left - View Code

          <form class="mt-3">
              <input type="text" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left" class="form-control" placeholder="Left">
          </form>

#### Input Text Styles

#### Input Text Bold

##### Input Text Bold - View Code

          <form class="mt-3">
              <input type="text" class="form-control fw-bold" placeholder="Bold Text">
          </form>

#### Input Text Normal

##### Input Text Normal - View Code

          <form class="mt-3">
              <input type="text" class="form-control fw-normal" placeholder="Normal Text">
          </form>

#### Input Text Light

##### Input Text Light - View Code

          <form class="mt-3">
              <input type="text" class="form-control fw-light" placeholder="Light Text">
          </form>

#### Input Text Italic

##### Input Text Italic - View Code

          <form class="mt-3">
              <input type="text" class="form-control font-italic" placeholder="Italic Text">
          </form>

#### Input Text Lowercase

##### Input Text Lowercase - View Code

          <form class="mt-3">
            <input type="text" class="form-control text-lowercase" placeholder="Lowercase">
          </form>

#### Input Text Uppercase

##### Input Text Uppercase - View Code

          <form class="mt-3">
              <input type="text" class="form-control text-uppercase" placeholder="Uppercase">
          </form>

#### Input Text Capitalize

##### Input Text Capitalize - View Code

          <form class="mt-3">
              <input type="text" class="form-control text-capitalize" placeholder="capitalize">
          </form>

#### Input Sizing

#### Small Input

##### Small Input - View Code

          <form class="mt-3">
              <input type="text" id="example-input-small" name="example-input-small" class="form-control form-control-sm" placeholder="Small">
          </form>

#### Normal Input

##### Normal Input - View Code

          <form class="mt-3">
            <input type="text" id="example-input-normal" name="example-input-normal" class="form-control" placeholder="Normal">
          </form>

#### Large Input

##### Large Input - View Code

          <form class="mt-3">
            <input type="text" id="example-input-large" name="example-input-large" class="form-control form-control-lg" placeholder="Large">
          </form>

#### Settings

###### Theme

Light Dark

###### Theme Direction

LTR RTL

###### Theme Colors

###### Layout Type

Vertical
Horizontal

###### Container Option

Boxed Full

###### Sidebar Type

Full
Collapse

###### Card With

Border Shadow

##### Quick Page Links

- Analytics /dashboards/dashboard1
- eCommerce /dashboards/dashboard2
- CRM /dashboards/dashboard3
- Contacts /apps/contacts
- Posts /apps/blog/posts
- Detail /apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow
- Shop /apps/ecommerce/shop
- Modern /dashboards/dashboard1
- Dashboard /dashboards/dashboard2
- Contacts /apps/contacts
- Posts /apps/blog/posts
- Detail /apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow
- Shop /apps/ecommerce/shop