Form

This module helps to build forms 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 class="input" type="text">
    </div>
    <div class="form-item">
        <label>Country</label>
        <select class="input">
            <option value="">---</option>
        </select>
    </div>
    <div class="form-item">
        <label class="checkbox">
            <input class="input" type="checkbox"> Check me
        </label>
        <label class="radio">
            <input class="input" type="radio"> Radio me
        </label>
    </div>
    <div class="form-item">
        <textarea class="input" 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 class="input" type="text">
    </div>
    <div class="form-item">
        <label>Email</label>
        <input class="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 class="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 push-right class for the button. See also Flex module and Push utility.


<form class="forml">
    <div class="form-item">
        <label>Name</label>
        <input class="input" type="text">
    </div>
    <div class="form-item flex">
        <button class="button button-primary">Save</button>
        <button class="button push-right">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 class="input" type="checkbox"> Check 1
        </label>
        <label class="checkbox">
            <input class="input" type="checkbox"> Check 2
        </label>
        <label class="checkbox">
            <input class="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 class="input" type="checkbox"> Check 1
        </label>
        <label class="checkbox">
            <input class="input" type="checkbox"> Check 2
        </label>
        <label class="checkbox">
            <input class="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 class="input" type="text">
    </div>
    <div class="form-item">
        <label>Email</label>
        <input class="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 class="input" type="text">
    </div>
    <div class="form-item">
        <label>Email</label>
        <input class="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 class="input" type="text">
    </div>
    <div class="form-item">
        <label>Email <span class="hint hint-req">*</span></label>
        <input class="input" type="email">
    </div>
</form>

Light #

Use form-label-light, hint-light modifiers on the dark backgrounds.


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

Variables #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.


// =FormItem
--form-item-space: 5rem;

// =FormLabel
// colors
--form-label-color: var(--text-default);
--form-background-color: transparent;

// params
--form-label-font-size: 15px;
--form-label-line-height: var(--body-text-line);
--form-label-font-weight: normal;
--form-label-font-style: normal;
--form-label-text-transform: none;
--form-label-letter-spacing: 0;
--form-label-space: 0.15em;
--form-label-border-radius: 0;
--form-label-padding: 0;

// =Checkbox/Radio
// colors
--checkbox-radio-color: inherit;

// params
--checkbox-radio-font-size: 15px;
--checkbox-radio-font-weight: normal;
--checkbox-radio-font-style: normal;
--checkbox-radio-text-transform: none;
--checkbox-radio-line-height: var(--body-text-line);
--checkbox-radio-letter-spacing: 0;
--checkbox-radio-space: 1rem;

// =Checkbox/Radio Group
// params
--checkbox-radio-group-space: 1em;