Input

Usage #

There are no helper classes or modifiers needed to display input, select, textarea in default state.

<input class="input">
<select class="input"></select>
<textarea class="input"></textarea>
<input class="input" type="checkbox">
<input class="input" type="radio">

Size #

By default, input, select, and textarea have three sizes: small, regular and large. The large or small size is set for all controls with the input-large or input-small classes.

<input class="input input-large" />
<select class="input input-large"></select>
<textare class="input input-large"></textarea>

<input class="input input-small" />
<select class="input input-small"></select>
<textare class="input input-small"></textarea>

Change size

You can change the default input sizes to what you want. To do this, change module variables in your custom SCSS. See also how to customize the framework.

.input-large {
    --input-height: 64px;
    --input-font-size: 32px;
}

As a result, the large input will get new properties and will look different than the default one.

<input class="input input-large">

Add size

You can add your own input size. To do this, add the new modifier of input to your custom SCSS. See also how to customize the framework.

.input-mega {
    --input-height: 72px;
    --input-font-size: 48px;
    --input-padding: 0.3em 0.25em;
}

As a result, you will have a input-mega modifier with a new size.

<input class="input input-mega">

Width #

You can change the width of input, select, textarea using the Sizing utility.

<input class="input max-100">
<input class="input max-75">
<input class="input max-50">

Light #

Superkube has a helper input-light class for displaying inputs on dark backgrounds.

<label class="form-label-light">...</label>
<input class="input input-light">

<label class="form-label-light">...</label>
<select class="input input-light"></select>

<label class="checkbox checkbox-light">
    <input class="input" type="checkbox"> Check me
</label>

<label class="radio radio-light">
    <input class="input" type="radio"> Radio me
</label>

<label class="form-label-light">...</label>
<textarea class="input input-light"></textarea>

Round #

Use the input-round modifier to make the inputs rounded.

<input class="input input-round">

States #

Set the disabled attribute to turn on the disabled state for inputs.

<input class="input" disabled>
<select class="input" disabled></select>
<textare class="input" disabled></textarea>
<label class="checkbox disabled">
    <input class="input" type="checkbox" disabled> Checkbox
</label>
<label class="checkbox disabled">
    <input class="input" type="radio" disabled> Radio
</label>

Use the input-error class to show those inputs that have input errors.

<input class="input input-error" />
<select class="input input-error"></select>
<textarea class="input input-error"></textarea>
<input type="checkbox" class="input input-error">
<input type="radio" class="input input-error">

Use the input-success class to show those inputs that have input success.

<input class="input input-success" />
<select class="input input-success"></select>
<textarea class="input input-success"></textarea>
<input type="checkbox" class="input input-success">
<input type="radio" class="input input-success">

Group and addon #

Use the input-group and input-addon class to append or prepend an icon or text.

// prepend
<div class="form-item">
    <label>Input</label>
    <div class="input-group">
        <span class="input-addon">$</span>
        <input type="text" />
    </div>
</div>

// append
<div class="form-item">
    <label>Input</label>
    <div class="input-group">
        <input type="text" />
        <span class="input-addon icon icon-16">
            <svg ...>
        </span>
    </div>
</div>

This also works with buttons.

<div class="form-item">
    <label>Input</label>
    <div class="input-group">
        <input type="text" />
        <button class="button button-primary">Save</button>
    </div>
</div>

And here is an example where the input has a large size.

<div class="form-item">
    <label>Input</label>
    <div class="input-group">
        <span class="input-addon">
            <svg ...>
        </span>
        <input type="text" class="input input-large" />
    </div>
</div>

Variables #

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

// =Input
// colors
--input-color: var(--palette-neutral-darker);
--input-border-color: var(--palette-black-20);
--input-background-color: var(--palette-white);
--input-box-shadow: none;
--input-focus-color: var(--palette-neutral-darker);
--input-focus-border-color: transparent;
--input-focus-outline-color: var(--palette-active-mid);
--input-focus-background-color: var(--palette-white);
--input-focus-box-shadow: none;

// params
--input-font-size: 15px;
--input-line-height: var(--body-text-line);
--input-border-radius: var(--radius-base);
--input-padding: 0.3em 0.5em;
--input-border-width: 1px;
--input-border-style: solid;
--input-outline-offset: -2px;
--input-outline-width: 2px;
--input-outline-style: solid;
--input-box-shadow: none;
--input-height: 42px;
--input-select-toggle: data:svg;

// =InputAddon
// colors
--input-addon-color: var(--palette-black-60);
--input-addon-background-color: var(--palette-black-5);
--input-addon-border-color: var(--palette-black-10);

// params
--input-addon-font-size: 14px;
--input-addon-padding: 0 0.85em;
--input-addon-border-radius: var(--radius-small);
--input-addon-border-width: 1px;
--input-addon-border-style: solid;