Input

Usage #

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

<input />
<select></select>
<textarea></textarea>
<input type="checkbox">
<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: var(--type-scale-32);
}

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: var(--type-scale-48);
    --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 width module.

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

Light #

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

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

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

<label class="text-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 disabled>
<select disabled></select>
<textare disabled></textarea>
<label class="checkbox disabled">
    <input type="checkbox" disabled> Checkbox
</label>
<label class="checkbox disabled">
    <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">

Add state

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

.input-success {
    --input-color: var(--palette-positive-dark);
    --input-border-color: var(--palette-positive-base);
    --input-outline-color: var(--palette-positive-base);
    --input-focus-box-shadow: inset 0 0 3px var(--palette-positive-light);
    --input-focus-border-color: var(--palette-positive-base);
}

As a result, you will have a created input-success class with the new state.

<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">

Addon #

Use the .input-group 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-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>

Use the .input-group-large class with input large variants.

<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 #

The default properties and colors of the module are shown below. These are all specified in the source of framework. This is here for clarity and to simplify modification and overriding of values.

// vars
--input-font-size: var(--type-scale-15);
--input-line-height: 1.5;
--input-border-radius: var(--radius-base);
--input-padding: 0.3em 0.5em;
--input-border-width: 1px;
--input-border-style: solid;
--input-box-shadow: none;
--input-height: 42px;
--input-select-toggle: url('data:image/svg+xml;utf8,<svg...></svg>');

// input-group
--input-addon-padding: 0 0.85em;
--input-addon-border-radius: var(--radius-base);
--input-addon-font-size: var(--type-scale-14);
--input-addon-color: var(--palette-black);
--input-addon-background-color: var(--palette-transparent);
--input-addon-border-color: var(--palette-black-25);

// small
--input-height: 36px;

// large
--input-font-size: var(--type-scale-21);
--input-height: 55px;

// default
--input-color: var(--palette-neutral-darker);
--input-border-color: var(--palette-black-20);
--input-background-color: var(--palette-white);
--input-focus-border-color: var(--palette-active-light);
--input-focus-box-shadow: inset 0 0 2px var(--palette-active-light);

// error
--input-color: var(--palette-negative-dark);
--input-border-color: var(--palette-negative-base);
--input-outline-color: var(--palette-negative-base);
--input-focus-color: var(--palette-negative-dark);
--input-focus-border-color: var(--palette-negative-base);
--input-focus-box-shadow: inset 0 0 3px var(--palette-negative-light);

// light
--input-color: var(--palette-white-90);
--input-border-color: var(--palette-white-40);
--input-background-color: var(--palette-white-15);
--input-focus-color: var(--palette-white-90);
--input-focus-border-color: var(--palette-white-60);
--input-focus-background-color: var(--palette-white-20);