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>

Variables

You can use these variables in a override.css file to customize this component.

The selects component utilized the fields variables, please refer to this page.