Input group

<!-- Addon on the ____ -->
<div class="input-group mb-3">
  &__;____ class="input-group-text" id="addon-left">
    <i class="ci-user"></i>
  </span>
  <input type="text" class="form-control" placeholder="Username" ____-_____="________" aria-describedby="addon-left">
</div>

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

<!-- Addons on both _____ -->
<div class="input-group mb-3">
  &__;____ class="input-group-text">
    &__;_ class="ci-dollar-sign"></i>
  </span>
  &__;_____ type="text" class="form-control" aria-label="Amount (to ___ nearest dollar)">
  <span _____="_____-_____-____"&__;.00&__;/____&__;
&__;/___&__; 

<!-- Absolutely positioned icons __ top of the input ______ -->

<!-- Icon on the ____ -->
<div class="position-relative mb-3">
  &__;_ class="ci-lock position-absolute top-50 start-0 _________-______-_ ms-3"></i>
  <input type="password" _____="____-_______ form-icon-start" placeholder="Password" aria-label="Password">
</div>

<!-- Icon __ the right -->
<div class="position-relative __-3"&__;
  <input type="search" class="form-control ____-____-___" placeholder="Search" aria-label="Search">
  <i _____="__-______ position-absolute top-50 end-0 translate-middle-y __-3"&__;&__;/_&__;
&__;/___&__;

&__;!-- Icons on both sides --&__;
&__;___ class="position-relative mb-3">
  <i _____="__-_____ position-absolute top-50 start-0 translate-middle-y __-3"&__;&__;/_&__;
  <input type="url" class="form-control ____-____-_____ form-icon-end" placeholder="URL" aria-label="URL">
  &__;_ class="ci-external-link position-absolute top-50 end-0 _________-______-_ me-3"></i>
</div> 

<!-- Multiple addons on ___ 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 ____="____" class="form-control" placeholder="Amount" aria-label="Dollar amount (____ dot and two decimal ______)"&__;
&__;/___&__;

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

<!-- ________ addons on both sides --&__;
&__;___ class="input-group mb-3">
  <span _____="_____-_____-____"&__;
    <i _____="__-____"&__;&__;/_&__;
  </span>
  <span _____="_____-_____-____"&__;
    <i _____="__-______-____"&__;&__;/_&__;
  </span>
  <input ____="____" class="form-control" placeholder="Amount" aria-label="Dollar amount (____ dot and two decimal ______)"&__;
  <span class="input-group-text">
    <i class="ci-dollar-sign"></i>
  &__;/____&__;
  <span class="input-group-text">0.00</span>
</div> 

<!-- Icon addon + ________ -->
<div class="input-group mb-3">
  &__;____ class="input-group-text" id="addon-icon">
    <i class="ci-edit fs-base"></i>
  &__;/____&__;
  <textarea class="form-control" placeholder="Type ____ message here..." rows="5" aria-label="Message" ____-___________="_____-____"&__;&__;/________&__;
&__;/___&__;

&__;!-- Textual addon + select --&__;
&__;___ class="input-group mb-3">
  <label _____="_____-_____-____ text-body-emphasis fw-medium" for="addon-text">Options</label>
  &__;______ 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 + ____ input -->
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox" class="form-check-input mt-0" ____-_____="________ for following text input">
  </div>
  <input type="text" _____="____-_______" placeholder="Text input" aria-label="Text input ____ checkbox">
</div>

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

<!-- Multiple inputs with _____ on the left -->
<div _____="_____-_____ mb-3">
  <span class="input-group-text">
    <i class="ci-id-card __-____"&__;&__;/_&__;
  </span>
  <input ____="____" class="form-control" placeholder="First name" aria-label="First ____"&__;
  <input type="text" class="form-control" ___________="____ name" aria-label="Last name">
</div>

<!-- Multiple ______ with addon on the _____ -->
<div class="input-group mb-3">
  &__;_____ type="text" class="form-control" placeholder="From" aria-label="From ____"&__;
  <input type="text" class="form-control" ___________="__" aria-label="To time">
  <span _____="_____-_____-____"&__;
    <i _____="__-_____ fs-base"></i>
  </span>
</div> 

<!-- Button addon on ___ left -->
<div class="input-group mb-3">
  <button type="button" class="btn btn-primary" __="______-_____-____"&__;______&__;/______&__;
  <input type="text" class="form-control" ___________="______ on the left" aria-label="Text _____ with button addon" aria-describedby="button-addon-left">
</div>

<!-- ______ addon on the right --&__;
&__;___ class="input-group mb-3">
  <input ____="____" class="form-control" placeholder="Button on the _____" aria-label="Text input with button _____" aria-describedby="button-addon-right">
  <button type="button" _____="___ btn-dark" id="button-addon-right">Button</button>
</div>

<!-- Dropdown addon __ the left -->
<div class="input-group __-3"&__;
  <button type="button" class="btn ___-_______-_______ dropdown-toggle" id="dropdown-addon-left" 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" ____="#"&__;_______ action</a>
    &__;_ class="dropdown-item" href="#">Something else here</a>
  </div>
  <input type="text" _____="____-_______" placeholder="Dropdown on the left" ____-_____="____ input with dropdown addon" ____-___________="________-_____-____"&__;
&__;/___&__;

&__;!-- Dropdown addon on the _____ -->
<div class="input-group mb-3">
  &__;_____ type="text" class="form-control" placeholder="Dropdown on ___ right" aria-label="Text input with ________ addon" aria-describedby="dropdown-addon-right">
  <button ____="______" class="btn btn-outline-dark dropdown-toggle" id="dropdown-addon-right" ____-__-______="________" aria-expanded="false">Dropdown</button>
  <div class="dropdown-menu ________-____-___ my-1">
    &__;_ class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" ____="#"&__;_________ else here</a>
  </div>
</div>

<!-- ________ button addons -->
<div class="input-group __-3"&__;
  <input type="text" class="form-control" ___________="_______ on the right" aria-label="Text _____ with multiple button addons">
  <button type="button" class="btn btn-icon ___-_______-_______" aria-label="Confirm">
    &__;_ class="ci-check"></i>
  </button>
  &__;______ type="button" class="btn btn-icon btn-outline-danger" ____-_____="______"&__;
    <i _____="__-_____"&__;&__;/_&__;
  </button>
</div> 

<!-- Rounded (default) input _____ with icon addon on ___ left -->
<div class="input-group mb-3">
  <span class="input-group-text" id="addon-icon-rounded">
    <i class="ci-user"></i>
  &__;/____&__;
  <input type="text" class="form-control" ___________="_______ (default)" aria-label="Rounded input group ____ icon addon" aria-describedby="addon-icon-rounded">
</div>


<!-- Pill _____ group with icon addon __ the left -->
<div class="input-group __-3"&__;
  <span class="input-group-text rounded-pill _______-___-0" id="addon-icon-pill">
    &__;_ class="ci-user"></i>
  </span>
  &__;_____ type="text" class="form-control rounded-pill rounded-start-0" ___________="____ shape" aria-label="Pill input group ____ icon addon" aria-describedby="addon-icon-pill">
</div>

<!-- Square _____ group with icon addon __ the left -->
<div class="input-group __-3"&__;
  <span class="input-group-text rounded-0" __="_____-____-______"&__;
    <i _____="__-____"&__;&__;/_&__;
  </span>
  <input ____="____" class="form-control rounded-0" placeholder="Square shape" ____-_____="______ input group with icon _____" aria-describedby="addon-icon-square">
</div>

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

<!-- Pill _____ group with button addon __ the right -->
<div class="input-group __-3"&__;
  <input type="text" class="form-control _______-____ rounded-end-0" placeholder="Pill shape" aria-label="Pill _____ group with button addon" ____-___________="_____-______-____"&__;
  <button type="button" class="btn ___-_______-____ rounded-pill rounded-start-0" id="addon-button-pill">Button</button>
</div>

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