Cartzilla v3.1.1
Buy now
Bootstrap docs

Input group

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

Addon position

@example.com
.00 
<!-- Addon on the left -->
<div class="input-group mb-3">
  <span class="input-group-text" id="addon-left">
    <i class="ci-user"></i>
  </span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-left">
</div>

<!-- Addon on the right -->
<div class="input-group mb-3">
  <input type="email" class="form-control" placeholder="Recipient's e-mail" aria-label="Recipient's e-mail" aria-describedby="addon-right">
  <span class="input-group-text" id="addon-right">@example.com</span>
</div>

<!-- Addons on both sides -->
<div class="input-group mb-3">
  <span class="input-group-text">
    <i class="ci-dollar-sign"></i>
  </span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-text">.00</span>
</div>

Icon inside input

<!-- Absolutely positioned icons on top of the input fields -->

<!-- Icon on the left -->
<div class="position-relative mb-3">
  <i class="ci-lock position-absolute top-50 start-0 translate-middle-y ms-3"></i>
  <input type="password" class="form-control form-icon-start" placeholder="Password" aria-label="Password">
</div>

<!-- Icon on the right -->
<div class="position-relative mb-3">
  <input type="search" class="form-control form-icon-end" placeholder="Search" aria-label="Search">
  <i class="ci-search position-absolute top-50 end-0 translate-middle-y me-3"></i>
</div>

<!-- Icons on both sides -->
<div class="position-relative mb-3">
  <i class="ci-globe position-absolute top-50 start-0 translate-middle-y ms-3"></i>
  <input type="url" class="form-control form-icon-start form-icon-end" placeholder="URL" aria-label="URL">
  <i class="ci-external-link position-absolute top-50 end-0 translate-middle-y me-3"></i>
</div>

Multiple addons

0.00
0.00
0.00 
<!-- Multiple addons on the left -->
<div class="input-group mb-3">
  <span class="input-group-text">
    <i class="ci-dollar-sign"></i>
  </span>
  <span class="input-group-text">0.00</span>
  <input type="text" class="form-control" placeholder="Amount" aria-label="Dollar amount (with dot and two decimal places)">
</div>

<!-- Multiple addons on the right -->
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Amount" aria-label="Dollar amount (with dot and two decimal places)">
  <span class="input-group-text">
    <i class="ci-dollar-sign"></i>
  </span>
  <span class="input-group-text">0.00</span>
</div>

<!-- Multiple addons on both sides -->
<div class="input-group mb-3">
  <span class="input-group-text">
    <i class="ci-user"></i>
  </span>
  <span class="input-group-text">
    <i class="ci-credit-card"></i>
  </span>
  <input type="text" class="form-control" placeholder="Amount" aria-label="Dollar amount (with dot and two decimal places)">
  <span class="input-group-text">
    <i class="ci-dollar-sign"></i>
  </span>
  <span class="input-group-text">0.00</span>
</div>

Different addon / input types

<!-- Icon addon + textarea -->
<div class="input-group mb-3">
  <span class="input-group-text" id="addon-icon">
    <i class="ci-edit fs-base"></i>
  </span>
  <textarea class="form-control" placeholder="Type your message here..." rows="5" aria-label="Message" aria-describedby="addon-icon"></textarea>
</div>

<!-- Textual addon + select -->
<div class="input-group mb-3">
  <label class="input-group-text text-body-emphasis fw-medium" for="addon-text">Options</label>
  <select class="form-select" id="addon-text">
    <option selected disabled>Choose one...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<!-- Checkbox addon + text input -->
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox" class="form-check-input mt-0" aria-label="Checkbox for following text input">
  </div>
  <input type="text" class="form-control" placeholder="Text input" aria-label="Text input with checkbox">
</div>

<!-- Radio button addon + text input -->
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio" class="form-check-input mt-0" aria-label="Radio button for following text input">
  </div>
  <input type="text" class="form-control" placeholder="Text input" aria-label="Text input with radio button">
</div>

Multiple inputs

<!-- Multiple inputs with addon on the left -->
<div class="input-group mb-3">
  <span class="input-group-text">
    <i class="ci-id-card fs-base"></i>
  </span>
  <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>

<!-- Multiple inputs with addon on the right -->
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="From" aria-label="From time">
  <input type="text" class="form-control" placeholder="To" aria-label="To time">
  <span class="input-group-text">
    <i class="ci-clock fs-base"></i>
  </span>
</div>

Button addons

<!-- Button addon on the left -->
<div class="input-group mb-3">
  <button type="button" class="btn btn-primary" id="button-addon-left">Button</button>
  <input type="text" class="form-control" placeholder="Button on the left" aria-label="Example text with button addon" aria-describedby="button-addon-left">
</div>

<!-- Button addon on the right -->
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Button on the right" aria-label="Example text with button addon" aria-describedby="button-addon-right">
  <button type="button" class="btn btn-dark" id="button-addon-right">Button</button>
</div>

<!-- Dropdown addon on the left -->
<div class="input-group mb-3">
  <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">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 type="text" class="form-control" placeholder="Dropdown on the right" aria-label="Text input with dropdown button">
</div>

<!-- Dropdown addon on the right -->
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Dropdown on the right" aria-label="Text input with dropdown button">
  <button type="button" class="btn btn-outline-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">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 button addons -->
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Buttons on the right" aria-label="Text input with multiple button addons">
  <button type="button" class="btn btn-icon btn-outline-success" aria-label="Confirm">
    <i class="ci-check"></i>
  </button>
  <button type="button" class="btn btn-icon btn-outline-danger" aria-label="Delete">
    <i class="ci-trash"></i>
  </button>
</div>

Shapes

<!-- Rounded (default) input group with icon addon on the left -->
<div class="input-group mb-3">
  <span class="input-group-text" id="addon-icon-rounded">
    <i class="ci-user"></i>
  </span>
  <input type="text" class="form-control" placeholder="Rounded (default)" aria-label="Rounded input group with icon addon" aria-describedby="addon-icon-rounded">
</div>


<!-- Pill input group with icon addon on the left -->
<div class="input-group mb-3">
  <span class="input-group-text rounded-pill rounded-end-0" id="addon-icon-pill">
    <i class="ci-user"></i>
  </span>
  <input type="text" class="form-control rounded-pill rounded-start-0" placeholder="Pill shape" aria-label="Pill input group with icon addon" aria-describedby="addon-icon-pill">
</div>

<!-- Square input group with icon addon on the left -->
<div class="input-group mb-3">
  <span class="input-group-text rounded-0" id="addon-icon-square">
    <i class="ci-user"></i>
  </span>
  <input type="text" class="form-control rounded-0" placeholder="Square shape" aria-label="Square input group with icon addon" aria-describedby="addon-icon-square">
</div>

<!-- Rounded (default) input group with button addon on the right -->
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Rounded (default)" aria-label="Rounded input group with button addon" aria-describedby="addon-button-rounded">
  <button type="button" class="btn btn-outline-dark" id="addon-button-rounded">Button</button>
</div>

<!-- Pill input group with button addon on the right -->
<div class="input-group mb-3">
  <input type="text" class="form-control rounded-pill rounded-end-0" placeholder="Pill shape" aria-label="Pill input group with button addon" aria-describedby="addon-button-pill">
  <button type="button" class="btn btn-outline-dark rounded-pill rounded-start-0" id="addon-button-pill">Button</button>
</div>

<!-- Square input group with button addon on the right -->
<div class="input-group mb-3">
  <input type="text" class="form-control rounded-0" placeholder="Square shape" aria-label="Square input group with button addon" aria-describedby="addon-button-square">
  <button type="button" class="btn btn-outline-dark rounded-0" id="addon-button-square">Button</button>
</div>

Sizes

<!-- Large input group with icon addon on the left -->
<div class="input-group input-group-lg mb-3">
  <span class="input-group-text" id="addon-icon-large">
    <i class="ci-user"></i>
  </span>
  <input type="text" class="form-control" placeholder="Large input group" aria-label="Large input group with icon addon" aria-describedby="addon-icon-large">
</div>

<!-- Normal input group with icon addon on the left -->
<div class="input-group mb-3">
  <span class="input-group-text" id="addon-icon-normal">
    <i class="ci-user"></i>
  </span>
  <input type="text" class="form-control" placeholder="Normal input group" aria-label="Normal input group with icon addon" aria-describedby="addon-icon-normal">
</div>

<!-- Small input group with icon addon on the left -->
<div class="input-group input-group-sm mb-3">
  <span class="input-group-text" id="addon-icon-small">
    <i class="ci-user"></i>
  </span>
  <input type="text" class="form-control" placeholder="Small input group" aria-label="Square input group with icon addon" aria-describedby="addon-icon-small">
</div>

<!-- Large input group with button addon on the right -->
<div class="input-group input-group-lg mb-3">
  <input type="text" class="form-control" placeholder="Large input group" aria-label="Large input group with button addon" aria-describedby="addon-button-large">
  <button type="button" class="btn btn-outline-dark" id="addon-button-large">Button</button>
</div>

<!-- Normal input group with button addon on the right -->
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Normal input group" aria-label="Normal input group with button addon" aria-describedby="addon-button-normal">
  <button type="button" class="btn btn-outline-dark" id="addon-button-normal">Button</button>
</div>

<!-- Small input group with button addon on the right -->
<div class="input-group input-group-sm">
  <input type="text" class="form-control" placeholder="Small input group" aria-label="Small input group with button addon" aria-describedby="addon-button-small">
  <button type="button" class="btn btn-outline-dark" id="addon-button-small">Button</button>
</div>
Top