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

Options

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