### 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

Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place `label`'s outside the input group.

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

    <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>

##### Wrapping

Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custom form field validation within an input group. You may disable this with `.flex-nowrap`

@

    <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

Add the relative form sizing classes to the `.input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

Small
Default
Large

    <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>

##### Checkboxes and Radios

Place any checkbox or radio option within an input group’s addon instead of text.

    <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

While multiple `input`s are supported visually, validation styles are only available for input groups with a single `input`.

First and last name

    <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>

##### Multiple Addons

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

$0.00
$0.00

    <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>

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### Settings

Set your own customized style

##### Color Scheme

Choose the perfect color mode for your app.

##### RTL Mode

Switch your language direction

RTL Documentation

##### Fluid Layout

Toggle container layout system

Fluid Documentation

##### Navigation Position

Select a suitable navigation system for your web application

##### Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

##### Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize