Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# 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="bx bx-lock fs-base"></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="bx bx-dollar fs-base"></i>
      </span>
      <input type="text" class="form-control" placeholder="Amount">
      <span class="input-group-text">.00</span>
    </div>

## Multiple addons

$ 0.00
0.00 $
0.00 $

    <!-- Multiple addons on left side -->
    <div class="input-group mb-4">
      <span class="input-group-text">$</span>
      <span class="input-group-text border-end-0">0.00</span>
      <input type="text" class="form-control" placeholder="Amount">
    </div>

    <!-- Multiple addons on right side -->
    <div class="input-group mb-4">
      <input type="text" class="form-control" placeholder="Amount">
      <span class="input-group-text border-start-0">0.00</span>
      <span class="input-group-text border-start">$</span>
    </div>

    <!-- Multiple addons on both sides -->
    <div class="input-group mb-4">
      <span class="input-group-text">
        <i class="bx bx-user fs-base"></i>
      </span>
      <span class="input-group-text border-end-0">
        <i class="bx bx-credit-card-front fs-base"></i>
      </span>
      <input type="text" class="form-control" placeholder="Amount">
      <span class="input-group-text border-start-0">0.00</span>
      <span class="input-group-text">$</span>
    </div>

## Different types

Options

    <!-- Icon addon -->
    <div class="input-group">
      <span class="input-group-text">
        <i class="bx bx-message fs-lg"></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 text-heading">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 -->
    <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 -->
    <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>

## Multiple inputs

First & last name

    <!-- Multiple inputs (addon on the left) -->
    <div class="input-group">
      <span class="input-group-text text-dark">First &amp; last 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="bx bx-time fs-lg"></i>
      </span>
    </div>

## 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 button addons -->
    <div class="input-group">
      <input class="form-control" type="text" placeholder="Buttons on the right">
      <button class="btn btn-outline-secondary bg-light btn-icon" type="button">
        <i class="bx bx-plus-circle text-nav"></i>
      </button>
      <button class="btn btn-outline-secondary bg-light btn-icon" type="button">
        <i class="bx bx-check-circle text-success"></i>
      </button>
      <button class="btn btn-outline-secondary bg-light btn-icon" type="button">
        <i class="bx bx-x-circle text-danger"></i>
      </button>
    </div>

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

Top