Input group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Examples

Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <label>s outside the input group.

<label class="form-label" for="email">Email Address</label>
<div class="input-group">
  <div class="input-group-item">
    <svg class="gi gi-envelope fs-3" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M19 4a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h14zm-1 2H6c-.99 0-1.378 1.283-.555 1.832l6 4a1 1 0 0 0 1.109 0l6-4C19.378 7.283 18.99 6 18 6z"/>
    </svg>
  </div>
  <input class="form-control" id="email" type="email" placeholder="Email Address">
</div>
<label class="form-label" for="password">Password</label>
<div class="input-group">
  <div class="input-group-item">
    <svg class="gi gi-lock fs-3" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 2a4 4 0 0 1 4 4v2h1a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3h1V6a4 4 0 0 1 4-4zm0 10a3 3 0 1 0 0 6 3 3 0 1 0 0-6zm0-8a2 2 0 0 0-2 2h0v2h4V6a2 2 0 0 0-2-2zm0 10a1 1 0 1 0 0 2 1 1 0 1 0 0-2z"/>
    </svg>
  </div>
  <input class="form-control" id="password" type="password" placeholder="Password">
  <div class="input-group-item">
    <svg class="gi gi-eye fs-3" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M12.002 5c3.602 0 6.877 2.145 9.826 6.434a1 1 0 0 1 .069 1.015l-.07.117-.246.352c-2.884 4.054-6.077 6.08-9.58 6.08-3.602 0-6.877-2.145-9.826-6.434a1 1 0 0 1-.069-1.015l.07-.117.246-.352C5.306 7.027 8.5 5 12.002 5zM12 9a3 3 0 1 0 0 6 3 3 0 1 0 0-6zm0 4a1 1 0 1 0 0-2 1 1 0 1 0 0 2z"/>
    </svg>
  </div>
</div>

Accessibility

Screen readers will have trouble with your forms if you don’t include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.

The exact technique to be used (<label> elements hidden using the .visually-hidden class, or use of the aria-label and aria-labelledby attributes, possibly in combination with aria-describedby) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you’re implementing. The examples in this section provide a few suggested, case-specific approaches.