Modules

Form

This module helps to build forms, hints, and controls for different actions with forms.

Base #

Here is an example of a basic form with a set of different controls.


<form class="form">
    <div class="form-item">
        <label>Name</label>
        <input type="text" name="name">
    </div>
    <div class="form-item">
        <label>Country</label>
        <select>
            <option value="">---</option>
        </select>
    </div>
    <div class="form-item">
        <label class="checkbox">
            <input type="checkbox"> Check me
        </label>
        <label class="checkbox">
            <input type="radio"> Radio me
        </label>
    </div>
    <div class="form-item">
        <textarea rows="6"></textarea>
    </div>
    <div class="form-item">
        <button class="button button-primary">Save</button>
        <button class="button">Cancel</button>
    </div>
</form>

Item #

Use the form-item class to place controls line by line in the form.


<form class="form">
    <div class="form-item">
        <label>Name</label>
        <input type="text">
    </div>
    <div class="form-item">
        <label>Email</label>
        <input type="email">
    </div>
</form>

The margin between the form-item is specified in $scales and default value is 5rem. You can change it by extending $scales. See also how to work with scales for modules and how to work with rem in Superkube.


// =Scales
$scales: map-extend($scales, (
    type-space: (
        form-item-to-item: 6rem
    )
));

Buttons #

Use the form-item class to place buttons at the bottom of the form.


<form class="form">
    <div class="form-item">...</div>
    <div class="form-item">...</div>
    <div class="form-item">
        <button class="button">...</button>
    </div>
</form>

Space between buttons

Use the row module to change the distance between the buttons.


<form class="form">
    <div class="form-item">
        <label>Name</label>
        <input type="text">
    </div>
    <div class="form-item row row-2">
        <button class="button button-primary">Save</button>
        <button class="button">Cancel</button>
    </div>
</form>

Push right

You can push one of the buttons to the right by making the parent block flex and adding a ml-auto class for the button. See also flex and spacing modules.


<form class="forml">
    <div class="form-item">
        <label>Name</label>
        <input type="text">
    </div>
    <div class="form-item flex">
        <button class="button button-primary">Save</button>
        <button class="button ml-auto">Cancel</button>
    </div>
</form>

Checkboxes #

By default, checkboxes or radios are placed in the form item line by line. Each checkbox has a label tag with a checkbox class.


<form class="form">
    <div class="form-item">
        <label class="checkbox">
            <input type="checkbox"> Check 1
        </label>
        <label class="checkbox">
            <input type="checkbox"> Check 2
        </label>
        <label class="checkbox">
            <input type="checkbox"> Check 3
        </label>
    </div>
</form>

Use checkbox-group to place the checkboxes in one line.


<form class="form">
    <div class="form-item checkbox-group">
        <label class="checkbox">
            <input type="checkbox"> Check 1
        </label>
        <label class="checkbox">
            <input type="checkbox"> Check 2
        </label>
        <label class="checkbox">
            <input type="checkbox"> Check 3
        </label>
    </div>
</form>

Hints #

Use the hint class to make the description of the form fields.


<form class="form">
    <div class="form-item">
        <label>Name <span class="hint">...</span></label>
        <input type="text">
    </div>
    <div class="form-item">
        <label>Email</label>
        <input type="email">
        <div class="hint">...</div>
    </div>
</form>

Use the hint-success and hint-error classes to display different states of descriptions.


<form class="form">
    <div class="form-item">
        <label>Name <span class="hint hint-success">...</span></label>
        <input type="text">
    </div>
    <div class="form-item">
        <label>Email</label>
        <input type="email" class="input input-error">
        <div class="hint hint-error">...</div>
    </div>
</form>

Required #

Use the hint-req classes to indicate the required field.


<form class="form">
    <div class="form-item">
        <label>Name</label>
        <input type="text">
    </div>
    <div class="form-item">
        <label>Email <span class="hint hint-req">*</span></label>
        <input type="email">
    </div>
</form>