## Input group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Input group on Bootstrap

#### Basic example

    <div class="input-group mb-3">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input class="form-control" type="text" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
    </div>
    <div class="input-group mb-3">
      <input class="form-control" type="text" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2" />
      <span class="input-group-text" id="basic-addon2">@example.com</span>
    </div>
    <label class="form-label" for="basic-url">Your vanity URL</label>
    <div class="input-group mb-3">
      <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
      <input class="form-control" id="basic-url" type="text" aria-describedby="basic-addon3" />
    </div>
    <div class="input-group mb-3">
      <span class="input-group-text">$</span>
      <input class="form-control" type="text" aria-label="Amount (to the nearest dollar)" />
      <span class="input-group-text">.00</span>
    </div>
    <div class="input-group">
      <span class="input-group-text">With textarea</span>
      <textarea class="form-control" aria-label="With textarea"></textarea>.
    </div>

@
@example.com
Your vanity URL
https://example.com/users/
$ .00
With textarea .

#### Wrapping

    <div class="input-group flex-nowrap">
      <span class="input-group-text" id="addon-wrapping">@</span>
      <input class="form-control" type="text" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping" />
    </div>

@

#### Sizing

    <div class="input-group input-group-sm mb-3">
      <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
      <input class="form-control" type="text" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" />
    </div>
    <div class="input-group mb-3">
      <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
      <input class="form-control" type="text" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" />
    </div>
    <div class="input-group input-group-lg">
      <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
      <input class="form-control" type="text" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" />
    </div>

Small
Default
Large

#### Checkboxes and Radios

    <div class="input-group mb-3">
      <div class="input-group-text">
        <input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input" />
      </div>
      <input class="form-control" type="text" aria-label="Text input with checkbox" />
    </div>
    <div class="input-group">
      <div class="input-group-text">
        <input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input" />
      </div>
      <input class="form-control" type="text" aria-label="Text input with radio button" />
    </div>

#### Multiple inputs

    <div class="input-group">
      <span class="input-group-text">First and last name</span>
      <input class="form-control" type="text" aria-label="First name" />
      <input class="form-control" type="text" aria-label="Last name" />
    </div>

First and last name

#### Multiple Addons

    <div class="input-group mb-3">
      <span class="input-group-text">$</span>
      <span class="input-group-text">0.00</span>
      <input class="form-control" type="text" aria-label="Dollar amount (with dot and two decimal places)" />
    </div>
    <div class="input-group">
      <input class="form-control" type="text" aria-label="Dollar amount (with dot and two decimal places)" />
      <span class="input-group-text">$</span>
      <span class="input-group-text">0.00</span>
    </div>

$ 0.00
$ 0.00

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize