#### Form Input Groups

##### Input Addons Left

-

##### Input Addons Left - View Code

          <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addon1">@</span>
              <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
          </div>

Add span with `.input-group-text` class before `<input>`

@

##### Input Addons Both Side

##### Input Addons Both Side - View Code

          <div class="input-group mb-3">
              <div class="input-group-prepend">
                  <span class="input-group-text">$</span>
              </div>
              <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
              <div class="input-group-append">
                  <span class="input-group-text">.00</span>
              </div>
          </div>

Add span with `.input-group-text` class before & after `<input>`

$ .00

##### Input Addons Right

##### Input Addons Right - View Code

          <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
            <span class="input-group-text">@</span>
          </div>

Add span with `.input-group-text` class after`<input>`

@

##### Input Addons Left Icon

##### Input Addons Left Icon - View Code

          <div class="input-group">
              <span class="input-group-text"><i data-feather="file-text" class="feather-sm fill-white"></i></span>
              <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
          </div>

##### Input Addons Both Side Icon

##### Input Addons Both Side Icon - View Code

            <div class="input-group mb-3">
                <span class="input-group-text"><i data-feather="file-text" class="feather-sm fill-white"></i></span>
                <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
                <span class="input-group-text"><i data-feather="trash-2" class="feather-sm fill-white"></i></span>
            </div>

##### Input Addons Right Icon

##### Input Addons Right Icon - View Code

          <div class="input-group mb-3">
              <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
              <span class="input-group-text"><i data-feather="file-text" class="feather-sm fill-white"></i></span>
          </div>

#### Addons With Checkbox

##### Addons With Right Checkbox

##### Addons With Right Checkbox - View Code

          <form>
              <div class="input-group">
                  <div class="input-group-text">
                      <div class="form-check">
                          <input type="checkbox" class="form-check-input" id="checkbox3" value="check">
                          <label class="form-check-label" for="checkbox3"></label>
                      </div>
                  </div>
                  <input type="text" class="form-control" aria-label="Text input with checkbox">
              </div>
          </form>

To use add `input-group-prepend` before input field.

##### Addons With Checkbox & Button

##### Addons With Checkbox & Button - View Code

          <form>
              <div class="input-group">
                  <div class="input-group-text">
                      <div class="form-check">
                          <input type="checkbox" class="form-check-input" id="checkbox2" value="check">
                          <label class="form-check-label" for="checkbox2"></label>
                      </div>
                  </div>
                  <input type="text" class="form-control" aria-label="Text input with checkbox">
                  <button class="btn bg-info-subtle text-info " type="button">Go!</button>
              </div>
          </form>

To use add `input-group-prepend & append` before and afetr input field.

##### Addons With Left Checkbox

##### Addons With Left Checkbox - View Code

          <form>
              <div class="input-group">
                  <input type="text" class="form-control" aria-label="Text input with checkbox">
                  <div class="input-group-text">
                      <div class="form-check">
                          <input type="checkbox" class="form-check-input" id="checkbox4" value="check">
                          <label class="form-check-label" for="checkbox4"></label>
                      </div>
                  </div>
              </div>
          </form>

To use add `input-group-append` after input field.

#### Addons With Radio

##### Addons With Left Radio

##### Addons With Left Radio - View Code

          <form>
              <div class="input-group">
                  <div class="input-group-text">
                      <div class="form-check">
                          <input type="radio" id="customRadio5" name="customRadio" class="form-check-input">
                          <label class="form-check-label" for="customRadio5"></label>
                      </div>
                  </div>
                  <input type="text" class="form-control" aria-label="Text input with radio button">
              </div>
          </form>

To use add `input-group-prepend` before input field.

##### Addons With Radio & Button

##### Addons With Radio & Button - View Code

          <form>
              <div class="input-group">
                  <button class="btn bg-info-subtle text-info " type="button">Go!</button>
                  <input type="text" class="form-control" aria-label="Text input with radio button">
                  <div class="input-group-text">
                      <div class="form-check">
                          <input type="radio" id="customRadio6" name="customRadio" class="form-check-input">
                          <label class="form-check-label" for="customRadio6"></label>
                      </div>
                  </div>
              </div>
          </form>

To use add `input-group-prepend & append` before and afetr input field.

##### Addons With Right Radio

##### Addons With Right Radio - View Code

          <form>
              <div class="input-group">
                  <input type="text" class="form-control" aria-label="Text input with radio button">
                  <div class="input-group-append">
                      <div class="input-group-text">
                          <div class="form-check">
                              <input type="radio" id="customRadio7" name="customRadio" class="form-check-input">
                              <label class="form-check-label" for="customRadio7"></label>
                          </div>
                      </div>
                  </div>
              </div>
          </form>

To use add `input-group-append` after input field.

#### Addons With Buttons

##### Addons With Color Button Left

##### Addons With Color Button Left - View Code

          <form class="mt-3">
              <div class="input-group mb-3">
                      <button class="btn bg-info-subtle text-info " type="button">Go!</button>
                  <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
              </div>
          </form>

To use add `button` in the prepend div.

##### Addons With Color Buttons Both

##### Addons With Color Buttons Both - View Code

          <form class="mt-3">
            <div class="input-group mb-3">
                <button class="btn bg-danger-subtle text-danger  d-flex align-items-center" type="button"><i data-feather="heart" class="fill-white feather-sm me-1"></i> Love</button>
                <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
                <button class="btn bg-info-subtle text-info  d-flex align-items-center" type="button"><i data-feather="slash" class="fill-white feather-sm me-1"></i>Hate</button>
            </div>
          </form>

To use add `button` in the prepend and append div.

##### Addons With Color Button Right

##### Addons With Color Button Right - View Code

          <form class="mt-3">
              <div class="input-group mb-3">
                  <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
                  <button class="btn bg-info-subtle text-info " type="button">Go!</button>
              </div>
          </form>

To use add `button` in the append div.

##### Addons With icon Button Left

##### Addons With icon Button Left - View Code

          <form class="mt-3">
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <button class="btn bg-info-subtle text-info" type="button">
                        <i data-feather="settings" class="fill-white feather-sm"></i>
                    </button>
                </div>
                <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
            </div>
          </form>

##### Addons With icon Buttons Both

##### Addons With icon Buttons Both - View Code

          <form class="mt-3">
              <div class="input-group mb-3">
                  <div class="input-group-prepend">
                      <button class="btn bg-info-subtle text-info" type="button">
                          <i data-feather="edit-2" class="fill-white feather-sm"></i>
                      </button>
                  </div>
                  <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
                  <button class="btn bg-danger-subtle text-danger" type="button">
                      <i data-feather="trash-2" class="fill-white feather-sm"></i>
                  </button>
              </div>
          </form>

##### Addons With icon Button Right

##### Addons With icon Button Right - View Code

          <form class="mt-3">
              <div class="input-group mb-3">
                  <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
                  <button class="btn bg-danger-subtle text-danger" type="button">
                      <i data-feather="heart" class="fill-white feather-sm"></i>
                  </button>
              </div>
          </form>

#### Multiple Addons

##### Addons With Left Side

##### Addons With Left Side - View Code

          <form class="mt-3">
              <div class="input-group">
                  <span class="input-group-text">$</span>
                  <span class="input-group-text">0.00</span>
                  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
              </div>
          </form>

To use add `input-group-text` class in the input-group-prepend class.

$ 0.00

##### Addons With Right Side

##### Addons With Right Side - View Code

          <form class="mt-3">
              <div class="input-group">
                  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
                  <span class="input-group-text">$</span>
                  <span class="input-group-text">0.00</span>
              </div>
          </form>

To use add `input-group-text` class in the input-group-append class.

$ 0.00

#### Multiple Inputs with Addons

##### Input With Right Side

##### Input With Right Side - View Code

          <form class="mt-3">
            <div class="input-group">
                <span class="input-group-text">First and last name</span>
                <input type="text" class="form-control">
                <input type="text" class="form-control">
            </div>
          </form>

To use add `form-control` two times.

First and last name

##### Input With Left Side

##### Input With Left Side - View Code

          <form class="mt-3">
            <div class="input-group">
                <input type="text" class="form-control">
                <input type="text" class="form-control">
                <span class="input-group-text">First and last name</span>
            </div>
          </form>

To use add `form-control` two times.

First and last name

#### Button Addons

##### Button With Left Side

##### Button With Left Side - View Code

                                                                                          <form class="mt-3">
                                                                                              <div class="input-group">
                                                                                                  <button class="btn bg-secondary-subtle text-secondary " type="button">Button</button>
                                                                                                  <input type="text" class="form-control" placeholder="Left Side" aria-label="" aria-describedby="basic-addon1">
                                                                                              </div>
                                                                                          </form>

To use add `button` in the prepend class.

##### Button With Right Side

##### Button With Right Side - View Code

          <form class="mt-3">
              <div class="input-group">
                  <input type="text" class="form-control" placeholder="Right Side" aria-label="Recipient's username" aria-describedby="basic-addon2">
                  <button class="btn bg-secondary-subtle text-secondary " type="button">Button</button>
              </div>
          </form>

To use add `button` in the append class.

##### Multiple Buttons With Left Side

##### Multiple Buttons With Left Side - View Code

          <form class="mt-3">
            <div class="input-group">
                <button class="btn bg-secondary-subtle text-secondary " type="button">Button</button>
                <button class="btn bg-secondary-subtle text-secondary " type="button">Button</button>
                <input type="text" class="form-control" placeholder="Left Side" aria-label="" aria-describedby="basic-addon1">
            </div>
          </form>

##### Multiple Buttons With Left Side

##### Multiple Buttons With Left Side - View Code

          <form class="mt-3">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Right Side" aria-label="Recipient's username" aria-describedby="basic-addon2">
                <button class="btn bg-secondary-subtle text-secondary " type="button">Button</button>
                <button class="btn bg-secondary-subtle text-secondary " type="button">Button</button>
            </div>
          </form>

#### Addons With Dropdown Buttons

##### Addons With Left Side Dropdown

##### Addons With Left Side Dropdown - View Code

          <form class="mt-3">
            <div class="input-group">
                <button class="btn bg-info-subtle text-info  dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                    <div role="separator" class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Separated link</a>
                </div>
                <input type="text" class="form-control" aria-label="Text input with dropdown button">
            </div>
          </form>

To use add `dropdown` in the prepend class div.

##### Addons With Right Side Dropdown

##### Addons With Right Side Dropdown - View Code

          <form class="mt-3">
            <div class="input-group">
                <input type="text" class="form-control" aria-label="Text input with dropdown button">
                <button class="btn bg-info-subtle text-info  dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                    <div role="separator" class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Separated link</a>
                </div>
            </div>
          </form>

To use add `dropdown` in the append class div.

##### Addons With Left Side Dropdown Segments

##### Addons With Left Side Dropdown Segments - View Code

          <form class="mt-3">
            <div class="input-group">
                <button type="button" class="btn bg-secondary-subtle text-secondary ">Action</button>
                <button type="button" class="btn bg-secondary-subtle text-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                    <div role="separator" class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Separated link</a>
                </div>
                <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
            </div>
          </form>

##### Addons With Right Side Dropdown Segments

##### Addons With Right Side Dropdown Segments - View Code

          <form class="mt-3">
            <div class="input-group">
                <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
                <button type="button" class="btn bg-secondary-subtle text-secondary ">Action</button>
                <button type="button" class="btn bg-secondary-subtle text-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                    <div role="separator" class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Separated link</a>
                </div>
            </div>
          </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