Denali CSS Docs are Moving

We've updated our documenation to align with our other frameworks. Our new documenation will live here and these pages will be removed.

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.