Input Group

Input group component is a wrapper component for buttons, inputs, radio, toggles, and checkboxes.

Labels

Add a label to fields by wrapping inline or text area fields within a <div> tag with the .input-group class. Field labels are positioned to the left by default but can be repositioned on top by adding the .is-stacked class to the field's outer <div> tag.



<div class="input-group">
    <label>Label</label>
    <div class="input">
        <input type="text" placeholder="Default field" />
    </div>
</div>
<br>
<div class="input-group is-stacked">
    <label>Label</label>
    <div class="input">
        <input type="text" placeholder="Stacked field" />
    </div>
</div>

Responsive Input Groups

By default fields are not responsive. Add the helper class responsive to fields in order to stack field labels and increase field width to 100% of the viewport at mobile screen sizes.



<div class="input-group responsive">
    <label>Label</label>
    <div class="input">
        <input type="text" placeholder="Responsive field" />
    </div>
</div>
<br>
<div class="input-group responsive">
    <label>Label</label>
    <div class="input">
        <textarea type="text" placeholder="Responsive text area"></textarea>
    </div>
</div>

Auto Labels

To adjust the label width to the size of the content add the class .auto to .input-group.



<div class="input-group auto">
    <label>Auto</label>
    <div class="input">
        <input type="text" placeholder="Auto Label Input" />
    </div>
</div>
<br>
<div class="input-group auto">
    <label>Longer Label</label>
    <label class="switch">
        <input type="checkbox" />
        <span class="slider"></span>
        <span class="off label">Toggle off</span>
        <span class="on label">Toggle on</span>
    </label>
</div>