AroundUI Kit
Buy now

Menu

Content

Components

Utilities

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="ai-lock-closed"></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">
    <i class="ai-dollar"></i>
  </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.ai-lock-closed
  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
    i.ai-dollar
  input(type="text", placeholder="Amount").form-control
  span.input-group-text
    | .00

Multiple addons

0.00
0.00
0.00 
<!-- Multiple addons on left side -->
<div class="input-group">
  <span class="input-group-text">
    <i class="ai-dollar"></i>
  </span>
  <span class="input-group-text">0.00</span>
  <input type="text" class="form-control" placeholder="Amount">
</div>

<!-- Multiple addons on right side -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="Amount">
  <span class="input-group-text">
    <i class="ai-dollar"></i>
  </span>
  <span class="input-group-text">0.00</span>
</div>

<!-- Multiple addons on both sides -->
<div class="input-group">
  <span class="input-group-text">
    <i class="ai-user"></i>
  </span>
  <span class="input-group-text">
    <i class="ai-card"></i>
  </span>
  <input type="text" class="form-control" placeholder="Amount">
  <span class="input-group-text">
    <i class="ai-dollar"></i>
  </span>
  <span class="input-group-text">0.00</span>
</div>
// Multiple addons on left side
.input-group
  span.input-group-text
    i.ai-dollar
  span.input-group-text 0.00
  input(type="text", placeholder="Amount").form-control

// Multiple addons on right side
.input-group
  input(type="text", placeholder="Amount").form-control
  span.input-group-text 0.00
  span.input-group-text
    i.ai-dollar

// Multiple addons on both sides
.input-group
  span.input-group-text
    i.ai-user
  span.input-group-text
    i.ai-card
  input(type="text", placeholder="Amount").form-control
  span.input-group-text 0.00
  span.input-group-text
    i.ai-dollar

Different types

Options 
<!-- Icon addon + textarea -->
<div class="input-group">
  <span class="input-group-text align-self-start mt-1">
    <i class="ai-message"></i>
  </span>
  <textarea class="form-control" placeholder="Type your message here..." rows="6"></textarea>
</div>

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

<!-- Checkbox addon + text input -->
<div class="input-group">
  <div class="input-group-text">
    <input class="form-check-input" type="checkbox">
  </div>
  <input class="form-control" type="text" placeholder="Checkbox here">
</div>

<!-- Radio button addon + text input -->
<div class="input-group">
  <div class="input-group-text">
    <input class="form-check-input" type="radio" name="radio">
  </div>
  <input class="form-control" type="text" placeholder="Radio button here">
</div>
// Icon addon + textarea
.input-group
  span.input-group-text.align-self-start.mt-1
    i.ai-message
  textarea(placeholder="Type your message here...", rows="6").form-control

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

// Checkbox addon + text input
.input-group
  .input-group-text
    input(type="checkbox").form-check-input
  input(type="text", placeholder="Checkbox here").form-control

// Radio button addon + text input
.input-group
  .input-group-text
    input(type="radio", name="radio").form-check-input
  input(type="text", placeholder="Radio button here").form-control

Multiple inputs

First & last name 
<!-- Multiple inputs with addon on the left -->
<div class="input-group">
  <span class="input-group-text text-dark">First &amp; last name</span>
  <input type="text" class="form-control" placeholder="First name">
  <span class="border-end border-input"></span>
  <input type="text" class="form-control" placeholder="Last name">
</div>

<!-- Multiple inputs with addon on the right -->
<div class="input-group">
  <input type="text" class="form-control" value="07:45">
  <span class="border-end border-input"></span>
  <input type="text" class="form-control" value="09:00">
  <span class="input-group-text">
    <i class="ai-time"></i>
  </span>
</div>
// Multiple inputs with addon on the left
.input-group
  span.input-group-text.text-dark First &amp; last name
  input(type="text", placeholder="First name").form-control
  span.border-end.border-input
  input(type="text", placeholder="Last name").form-control

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

Button addons

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

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

<!-- Dropdown addon on the left -->
<div class="input-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>
  <div class="dropdown-menu my-1">
    <a href="#" class="dropdown-item">Action</a>
    <a href="#" class="dropdown-item">Another action</a>
    <a href="#" class="dropdown-item">Something else here</a>
  </div>
  <input type="text" class="form-control" placeholder="Dropdown on the right">
</div>

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

<!-- Multiple button addons -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="Buttons on the right">
  <button type="button" class="btn btn-outline-primary btn-icon">
    <i class="ai-edit"></i>
  </button>
  <button type="button" class="btn btn-outline-danger btn-icon">
    <i class="ai-trash"></i>
  </button>
</div>
// Button addon on the left
.input-group
  button(type="button").btn.btn-primary
    | 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(type="button").btn.btn-primary
    | 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(href="#").dropdown-item
      | Action
    a(href="#").dropdown-item
      | Another action
    a(href="#").dropdown-item
      | 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(type="button", data-bs-toggle="dropdown").btn.btn-primary.dropdown-toggle
    | Dropdown
  .dropdown-menu.dropdown-menu-end.my-1
    a(href="#").dropdown-item
      | Action
    a(href="#").dropdown-item
      | Another action
    a(href="#").dropdown-item
      | Something else here

// Multiple button addons
.input-group
  input(type="text", placeholder="Buttons on the right").form-control
  button(type="button").btn.btn-outline-primary.btn-icon
    i.ai-edit
  button(type="button").btn.bg-outline-danger.btn-icon
    i.ai-trash

Pill shape

<!-- Pill shape input group -->
<div class="input-group rounded-pill">
  <span class="input-group-text">
    <i class="ai-search"></i>
  </span>
  <input type="search" class="form-control" placeholder="Search...">
  <button type="button" class="btn btn-primary rounded-pill">Search</button>
</div>
// Pill shape input group
.input-group.rounded-pill
  span.input-group-text
    i.ai-search
  input(type="search", placeholder="Search...").form-control
  button(type="button").btn.btn-primary.rounded-pill
    | Search

Sizing

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

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

<!-- Small input group -->
<div class="input-group input-group-sm">
  ...
</div>
// Large input group
.input-group.input-group-lg
  | ...

// Normal input group
.input-group
  | ...

// Small input group
.input-group.input-group-sm
  | ...