Finder Buy now

Input group

Extend form controls by adding text, buttons, etc. on either side.

Bootstrap docs

Addon position

@example.com
$ .00 
<!-- Addon on the left -->
<div class="input-group">
  <span class="input-group-text">
    <i class="fi-lock"></i>
  </span>
  <input type="password" class="form-control" placeholder="Password">
</div>

<!-- Addon on the right -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's e-mail">
  <span class="input-group-text">@example.com</span>
</div>

<!-- Addons on both sides -->
<div class="input-group">
  <span class="input-group-text fs-lg py-1">$</span>
  <input type="text" class="form-control" placeholder="Amount">
  <span class="input-group-text">.00</span>
</div>
// Addon on the left
.input-group
  span.input-group-text
    i.fi-lock
  input(type="password", placeholder="Password").form-control

// Addon on the right
.input-group
  input(type="text", placeholder="Recipient's e-mail").form-control
  span.input-group-text
    | @example.com

// Addons on both sides
.input-group
  span.input-group-text.fs-lg.py-1
    | $
  input(type="text", placeholder="Amount").form-control
  span.input-group-text
    | .00

Different types

Options 
<!-- Icon addon -->
<div class="input-group">
  <span class="input-group-text">
    <i class="fi-chat-left"></i>
  </span>
  <textarea class="form-control" placeholder="Type your message here..." rows="6"></textarea>
</div>

<!-- Textual addon -->
<div class="input-group">
  <span class="input-group-text fw-bold text-dark">Options</span>
  <select class="form-select">
    <option>Choose one...</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>
</div>

<!-- Checkbox addon -->
<div class="input-group">
  <div class="input-group-text py-1 pe-2">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="ex-check-1">
      <label class="form-check-label" for="ex-check-1"></label>
    </div>
  </div>
  <input class="form-control" type="text" placeholder="Checkbox here">
</div>

<!-- Radio button addon -->
<div class="input-group">
    <div class="input-group-text py-1 pe-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" id="ex-radio-1" name="radio">
        <label class="form-check-label" for="ex-radio-1"></label>
      </div>
    </div>
  <input class="form-control" type="text" placeholder="Radio button here">
</div>
// Icon addon
.input-group
  span.input-group-text
    i.fi-chat-left
  textarea(placeholder="Type your message here...", rows="6").form-control

// Textual addon
.input-group
  span.input-group-text.fw-bold.text-dark
    | Options
  select.form-select
    option Choose one...
    option One
    option Two
    option Three
    option Four
    option Five

// Checkbox addon
.input-group.mb-3
  .input-group-text.py-1.pe-2
    .form-check
      input(type="checkbox", id="ex-check-1").form-check-input
      label(for="ex-check-1").form-check-label
  input(type="text", placeholder="Checkbox here").form-control

// Radio button addon
.input-group.mb-3
  .input-group-text.py-1.pe-2
    .form-check
      input(type="radio", id="ex-radio-1", name="radio").form-check-input
      label(for="ex-radio-1").form-check-label
  input(type="text", placeholder="Radio button here").form-control

Multiple inputs

Full name 
<!-- Multiple inputs (addon on the left) -->
<div class="input-group">
  <span class="input-group-text fw-bold text-dark">Full name</span>
  <input class="form-control" type="text" placeholder="First name">
  <input class="form-control" type="text" placeholder="Last name">
</div>

<!-- Multiple inputs (addon on the right) -->
<div class="input-group">
  <input class="form-control" type="time" value="07:45">
  <input class="form-control" type="time" value="09:00">
  <span class="input-group-text">
    <i class="fi-time"></i>
  </span>
</div>
// Multiple inputs (addon on the left)
.input-group
  span.input-group-text.fw-bold.text-dark Full name
  input(type="text", placeholder="First name").form-control
  input(type="text", placeholder="Last name").form-control

// Multiple inputs (addon on the right)
.input-group
  input(type="time", value="07:45").form-control
  input(type="time", value="09:00").form-control
  span.input-group-text
    i.fi-time

Button addons

<!-- Button addon on the left -->
<div class="input-group">
  <button class="btn btn-primary" type="button">Button</button>
  <input class="form-control" type="text" placeholder="Button on the left">
</div>

<!-- Button addon on the right -->
<div class="input-group">
  <input class="form-control" type="text" placeholder="Button on the right">
  <button class="btn btn-primary" type="button">Button</button>
</div>

<!-- Dropdown addon on the left -->
<div class="input-group">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
  <div class="dropdown-menu my-1">
    <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>
  <input class="form-control" type="text" placeholder="Dropdown on the right">
</div>

<!-- Dropdown addon on the right -->
<div class="input-group">
  <input class="form-control" type="text" placeholder="Dropdown on the right">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
  <div class="dropdown-menu dropdown-menu-end my-1">
    <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>
</div>

<!-- Multiple icon link addons -->
<div class="input-group">
  <input class="form-control" type="text" placeholder="Icon links on the right">
  <div class="input-group-text p-0">
    <a class="d-block text-body px-3 py-2" href="#">
      <i class="fi-edit mt-n1"></i>
    </a>
  </div>
  <div class="input-group-text p-0">
    <a class="d-block text-success px-3 py-2" href="#">
      <i class="fi-check mt-n1"></i>
    </a>
  </div>
  <div class="input-group-text p-0">
    <a class="d-block text-danger px-3 py-2" href="#">
      <i class="fi-trash mt-n1"></i>
    </a>
  </div>
</div>
// Button addon on the left
.input-group
  button.btn.btn-primary(type="button") Button
  input(type="text", placeholder="Button on the left").form-control

// Button addon on the right
.input-group
  input(type="text", placeholder="Button on the right").form-control
  button.btn.btn-primary(type="button") Button

// Dropdown addon on the left
.input-group
  button(type="button", data-bs-toggle="dropdown").btn.btn-primary.dropdown-toggle Dropdown
  .dropdown-menu.my-1
    a.dropdown-item(href="#") Action
    a.dropdown-item(href="#") Another action
    a.dropdown-item(href="#") Something else here
  input(type="text", placeholder="Dropdown on the left").form-control

// Dropdown addon on the right
.input-group
  input(type="text", placeholder="Dropdown on the right").form-control
  button.btn.btn-primary.dropdown-toggle(type="button", data-bs-toggle="dropdown") Dropdown
  .dropdown-menu.dropdown-menu-end.my-1
    a.dropdown-item(href="#") Action
    a.dropdown-item(href="#") Another action
    a.dropdown-item(href="#") Something else here

// Multiple icon link addons
.input-group
  input(type="text", placeholder="Icon links on the right").form-control
  .input-group-text.p-0
    a(href="#").d-block.text-body.px-3.py-2
      i.fi-edit.mt-n1
  .input-group-text.p-0
    a(href="#").d-block.text-success.px-3.py-2
      i.fi-check.mt-n1
  .input-group-text.p-0
    a(href="#").d-block.text-danger.px-3.py-2
      i.fi-trash.mt-n1

Sizing

<!-- Input group large -->
<div class="input-group input-group-lg">
  ...
</div>

<!-- Input group normal -->
<div class="input-group">
  ...
</div>

<!-- Input group small -->
<div class="input-group input-group-sm">
  ...
</div>
// Input group large
.input-group.input-group-lg
  | ...

// Input group normal
.input-group
  | ...

// Input group small
.input-group.input-group-sm
  | ...
Top