
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">
<span class="input-group-text">
<i class="ci-locked"></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="ci-dollar"></i>
</span>
<input type="text" class="form-control" placeholder="Amount">
<span class="input-group-text">.00</span>
</div>
Different types
Options
<!-- Icon addon -->
<div class="input-group">
<span class="input-group-text">
<i class="ci-message"></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-medium">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 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 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>
Multiple inputs
Full name
<!-- Multiple inputs (addon on the left) -->
<div class="input-group">
<span class="input-group-text fw-medium">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="ci-time"></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">
<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">
<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-white border btn-icon" type="button">
<i class="ci-edit"></i>
</button>
<button class="btn btn-white border btn-icon" type="button">
<i class="ci-check text-success"></i>
</button>
<button class="btn btn-white border btn-icon" type="button">
<i class="ci-trash text-danger"></i>
</button>
</div>