Input group

Input groups can be used to extend form controls by adding text or buttons on either side of inputs or select boxes. The <input>, <select>, and <textarea> elements are supported inside input groups.

@
@example.com
Income
$
Text 1
Text 2
Text 1
Text 2
About 
<!-- Input group with prepended text -->
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Your username">
</div>

<!-- Input group with appended text -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="Your username">
  <div class="input-group-append">
    <span class="input-group-text">@example.com</span>
  </div>
</div>

<!-- Input group with prepended and appended text -->
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">Income</span>
  </div>
  <input type="text" value="0.00" class="form-control">
  <div class="input-group-append">
    <span class="input-group-text">$</span>
  </div>
</div>

<!-- Input group with stacked text (appended) -->
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">Text 1</span>
  </div>
  <div class="input-group-prepend">
    <span class="input-group-text">Text 2</span>
  </div>
  <input type="text" class="form-control" placeholder="Input">
</div>

<!-- Input group with stacked text (prepended) and select box -->
<div class="input-group">
  <select class="form-control">
    <option value="" selected="selected" disabled="disabled">Select one</option>
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
  </select>
  <div class="input-group-append">
    <span class="input-group-text">Text 1</span>
  </div>
  <div class="input-group-append">
    <span class="input-group-text">Text 2</span>
  </div>
</div>

<!-- Input group with prepended text and textarea -->
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">About</span>
  </div>
  <textarea class="form-control" placeholder="Tell us about yourself"></textarea>
</div>

Input groups will take up the full width of the parent container and have no margins (margin: 0) by default. All the input groups on this page are placed inside containers with a width of 40rem (400px), and a maximum width of 100%. They are also styled to have a margin on the bottom using a utility class. None of this is shown in the code for the sake of conciseness.

Using buttons #

Buttons can also be used as add-ons by placing them inside the containers with the class .input-group-prepend or .input-group-append. They can also be used to toggle dropdown menus, as can be seen in the next example.

Header
Link 1 Link 2 
<!-- Input group with prepended button (that toggles a dropdown) -->
<div class="input-group">
  <div class="input-group-prepend dropdown">
    <button class="btn" data-toggle="dropdown" type="button" id="dropdown-toggle-btn-1" aria-haspopup="true" aria-expanded="false">
      Dropdown <i class="fa fa-angle-down ml-5" aria-hidden="true"></i> <!-- ml-5 = margin-left: 0.5rem (5px) -->
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdown-toggle-btn-1">
      <h6 class="dropdown-header">Header</h6>
      <a href="#" class="dropdown-item">Link 1</a>
      <a href="#" class="dropdown-item">Link 2</a>
      <div class="dropdown-divider"></div>
      <div class="dropdown-content">
        <button class="btn btn-block" type="button">Button</button>
      </div>
    </div>
  </div>
  <input type="text" class="form-control" placeholder="Input">
</div>

<!-- Input group with appended button -->
<div class="input-group">
  <input type="email" class="form-control" placeholder="Enter email address">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">Sign up</button>
  </div>
</div>

<!-- Input group with prepended and appended buttons and select box -->
<div class="input-group">
  <div class="input-group-prepend">
    <button class="btn" type="button">Btn 1</button>
  </div>
  <select class="form-control">
    <option value="" selected="selected" disabled="disabled">Select one</option>
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
  </select>
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">Btn 2</button>
  </div>
</div>

<!-- Input group with stacked buttons (appended) -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="Input">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">Btn 1</button>
  </div>
  <div class="input-group-append">
    <button class="btn btn-success" type="button">Btn 2</button>
  </div>
</div>

<!-- Another input group with stacked buttons (appended) -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="Input">
  <div class="input-group-append">
    <button class="btn btn-secondary" type="button">Btn 1</button>
  </div>
  <div class="input-group-append">
    <button class="btn btn-danger" type="button">Btn 2</button>
  </div>
</div>

The icon being used in the dropdown button is part of the Font Awesome 4.7.0 iconset.

Stacking text and buttons #

Text and buttons can be stacked inside input groups in any combination imaginable. The only limitation is the size of the screen and the usability of long stacks on smaller ones.

Shop
@ 
<!-- Input group with prepended text and appended button -->
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">Shop</span>
  </div>
  <input type="text" class="form-control" placeholder="Enter products">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">Search</button>
  </div>
</div>

<!-- Input group with prepended text and stacked buttons (appended) -->
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">Submit</button>
  </div>
  <div class="input-group-append">
    <button class="btn btn-danger" type="button">Reset</button>
  </div>
</div>

Sizing #

Different sizes of input groups are also available:

  • Large input groups can be created by adding the .input-group-lg class to the container.
  • Small input groups can be created by adding the .input-group-sm class to the container.
Text
Text
Text 
<!-- Large input group -->
<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text">Text</span>
  </div>
  <input type="text" class="form-control" placeholder="Large input group">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">Btn</button>
  </div>
</div>

<!-- Regular input group -->
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">Text</span>
  </div>
  <input type="text" class="form-control" placeholder="Regular input group">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">Btn</button>
  </div>
</div>

<!-- Small input group -->
<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    <span class="input-group-text">Text</span>
  </div>
  <input type="text" class="form-control" placeholder="Small input group">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">Btn</button>
  </div>
</div>

Checkbox, radio button, switch #

Checkboxes, radio buttons, and switches can also be used with input groups, by placing them inside the container with the class .input-group-text. In the next examples, please note the <label for="..." class="blank"></label> element. This is needed to render the custom checkbox, radio button and switch correctly, and the class removes any extra margin for the label. 

<!-- Input group with prepended checkbox -->
<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <div class="custom-checkbox">
        <input type="checkbox" id="checkbox-1" value="" checked="checked">
        <label for="checkbox-1" class="blank"></label>
      </div>
    </div>
  </div>
  <input type="text" class="form-control" placeholder="Input group with checkbox">
</div>

<!-- Input group with appended radio button -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="Input group with radio button">
  <div class="input-group-append">
    <div class="input-group-text">
      <div class="custom-radio">
        <input type="radio" name="radio-set-1" id="radio-1" value="">
        <label for="radio-1" class="blank"></label>
      </div>
    </div>
  </div>
</div>

<!-- Input group with prepended switch -->
<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <div class="custom-switch">
        <input type="checkbox" id="switch-1" value="">
        <label for="switch-1" class="blank"></label>
      </div>
    </div>
  </div>
  <input type="text" class="form-control" placeholder="Input group with switch">
</div>

Multiple form-controls #

Multiple form-controls can also be placed inside input groups. By default, each form-control will take up as much width as possible (flex: 1 1 0%;). However, they can be made to take up specific widths by resetting the flex property using the .flex-reset class, and adding a specific sizing utility class. For instance, in the example below, the classes .w-50 (sets width: 5rem (50px)) and .w-100 (sets width: 10rem (100px)) are used.

Name 
<!-- Input group with three inputs and prepended text -->
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">Name</span>
  </div>
  <input type="text" class="form-control flex-reset w-50" placeholder="Title"> <!-- flex-reset = flex: 0 1 auto, w-50 = width: 5rem (50px) -->
  <input type="text" class="form-control" placeholder="First">
  <input type="text" class="form-control" placeholder="Last">
</div>

<!-- Input group with a select box and an input -->
<div class="input-group">
  <select class="form-control flex-reset w-100"> <!-- flex-reset = flex: 0 1 auto, w-50 = width: 10rem (100px) -->
    <option value="" selected="selected" disabled="disabled">Class</option>
    <option value="class-1">Class 1</option>
    <option value="class-2">Class 2</option>
    <option value="class-3">Class 3</option>
    <option value="class-4">Class 4</option>
    <option value="class-5">Class 5</option>
  </select>
  <input type="text" class="form-control" placeholder="Search ID">
</div>

<!-- Input group with two inputs and one appended button -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="Company">
  <input type="text" class="form-control" placeholder="Email">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">Sign up</button>
  </div>
</div>
Up next: Alerts
On this page
Input group Using buttons Stacking text and buttons Sizing Checkbox, radio button, switch Multiple form-controls

Help us grow

Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.

However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.

Gold sponsor

The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)

Sponsors

The following is the normal tier, with a maximum of 10 sponsors.

Backers

The following people have generously decided to support Halfmoon.

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.
halfmoon-logo halfmoon-logo-white

Get in touch

Legal

Made with for developers

Scroll to top
© Copyright 2025, Halfmoon UI