Forms

Forms come in all forms and shapes in Kube, and you can do all sorts of things with them, especially when combining with custom plugins for extra interactivity. These forms are ideal building material for your awesome projects!.

Base

This is the most basic form with all the basic inputs.

<form method="post" action="" class="form">

    <div class="form-item">
        <label>Email</label>
        <input type="email" name="email" class="w50">
    </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>Log in</button>
        <button class="button secondary outline">Cancel</button>
    </div>

</form>

Inputs

Here's a standard input field with type set as text. Label serves as input's label, and the following div with class desc serves as an optional description.

This information helps us deliver orders on time.
<form class="form">
    <div class="form-item">
        <label>City</label>
        <input type="text">
        <div class="desc">...</div>
    </div>
</form>

Here are two text input fields, one with a placeholder and another one disabled, both set to be 6 grid columns wide.

<form class="form">
    <div class="row gutters">
        <div class="col col-6">
            <div class="form-item">
                <input type="text" placeholder="Email">
            </div>
        </div>
        <div class="col col-6">
            <div class="form-item">
                <input type="text" disabled="true" value="Disabled">
            </div>
        </div>
    </div>
</form>

Here's how you denote required fields with req class, and add descriptions to labels using span with class desc.

This information helps us deliver orders on time.
<form class="form">
    <div class="row gutters">
        <div class="col col-6">
            <div class="form-item">
                <label>City <span class="req">*</span></label>
                <input type="text">
            </div>
        </div>
        <div class="col col-6">
            <div class="form-item">
                <label>City <span class="desc">...</span></label>
                <input type="text">
                <div class="desc">...</div>
            </div>
        </div>
    </div>
</form>

<form class="form">
    <div class="form-item">
        <input type="text" class="search">
    </div>
</form>

Checkboxes & Radio

Kube features full variety of stylish checkboxes and radio buttons. You can feature them on your pages by defining input type as checkbox or radio. There's also a neat option to place checkboxes inline by adding form-checkboxes class to the container (works for both checkboxes and radio buttons)

<form method="post" action="" class="form">
    <div class="form-item form-checkboxes">
        <label class="checkbox"><input type="checkbox"> Check 1</label>
        ...
    </div>
</form>

<form method="post" action="" class="form">
    <div class="form-item">
        <label class="checkbox"><input type="checkbox"> Check 1</label>
        ...
    </div>
</form>

<form method="post" action="" class="form">
    <div class="form-item form-checkboxes">
        <label class="checkbox"><input type="radio"> Check 1</label>
        ...
    </div>
</form>

<form method="post" action="" class="form">
    <div class="form-item">
        <label class="checkbox"><input type="radio"> Check 1</label>
        ...
    </div>
</form>

Fieldset

Fieldsets in Kube are nicely pre-formatted and ready to go. Just wrap your form in a fieldset tag and you're good to go.

Login data
<fieldset>
    <legend>Login data</legend>
    <div class="form-item">
        <label>Email</label>
        <input type="email" name="user-email" class="w50">
    </div>
    <div class="form-item">
        <label>Password</label>
        <input type="password" name="user-password" class="w50">
    </div>
</fieldset>
About
<fieldset>
    <legend>About</legend>
    <div class="form-item">
        <textarea name="user-about" rows="5"></textarea>
    </div>
    <div class="form-item">
        <button>Submit</button>
    </div>
</fieldset>

Small

Simple class .small makes your selects and fields, well, smaller.

<form class="form">
    <div class="form-item">
        <input type="text" class="small" placeholder="Title">
    </div>
    <div class="form-item">
        <select class="small">
            <option>...</option>
        </select>
    </div>
</form>

Big

Simple class .big makes your selects and fields, well, bigger.

<form class="form">
    <div class="form-item">
        <input type="text" class="big" placeholder="Title">
    </div>
    <div class="form-item">
        <select class="big">
            <option>...</option>
        </select>
    </div>
</form>

Width

Following framework-wide rules, it is very easy to manipulate form fields sizes. Just use w50 class to make a field 50% wide or w25 to a 25% wide.

<form method="post" action="" class="form">
    <div class="form-item">
        <input type="text" class="w25">
    </div>
    <div class="form-item">
        <input type="text" class="w50">
    </div>
    <div class="form-item">
        <input type="text" class="w75">
    </div>
    <div class="form-item">
        <input type="text" value="100% by default">
    </div>
</form>

States

By default, Kube features two different states: success and failure.

<form method="post" action="" class="form">
    <div class="form-item">
        <label>Your height <span class="success">...</span></label>
        <input type="text" class="success">
    </div>
</form>

<form method="post" action="" class="form">
    <div class="form-item">
        <label>Enter your weight <span class="error">...</span></label>
        <input type="text" class="error">
    </div>
</form>

Required

Along with making a field actually required, you can add a visual clue for the users using a span with req class.

<form method="post" action="" class="form">
    <div class="form-item">
        <label>Email <span class="req">*</span></label>
        <input type="email" name="user-email">
    </div>
</form>

Descriptions

Descriptions are simple: as long as form's element has desc class, Kube will treat it as a description.

Please enter your email.
<form method="post" action="" class="form">
    <div class="form-item">
        <label>Name <span class="desc">...</span></label>
        <input type="text" name="user-name">
    </div>
    <div class="form-item">
        <label>Email</label>
        <input type="email" name="user-email">
        <div class="desc">...</div>
    </div>
</form>

Disabled

Not only text inputs can be disabled, but checkboxes and radio buttons as well. Just add disabled attribute or .disabled class to the input.

<input type="text" value="" disabled>
<input type="checkbox" class="disabled">
<input type="radio" disabled>
<textarea disabled></textarea>
<select disabled>
    <option>...</option>
</select>

Append & Prepend

You can prepend or append certain elements within your input fields, such as currency characters.

$ 
<form method="post" action="" class="form">
    <div class="form-item">
        <label>How much is it?</label>
        <div class="prepend w50">
            <span>$</span>
            <input type="text">
        </div>
    </div>
</form>
$
<form method="post" action="" class="form">
    <div class="form-item">
        <label>It is much how?</label>
        <div class="append">
            <input type="text"><span>$</span>
        </div>
    </div>
</form>

Button Append

Appending works for buttons as well. Here you can see a button that has been appended and included withing a text input field.

<form method="post" action="" class="form">
    <div class="form-item">
        <label>Label</label>
        <div class="append w50">
            <input type="text" name="search" placeholder="Search">
            <button class="button outline">Go</button>
        </div>
    </div>
</form>

More Examples

The examples below are quite self explanatory and they cover multiple selections, selecting dates, filling in phone numbers, a ready feedback form template and more. Feel free to use any of these examples as templates for your sites.

<form method="post" action="" class="form">
    <div class="form-item">
        <label>Select multiple</label>
        <select class="w50" multiple="multiple" size="10">
            <optgroup label="Group 1">
                <option value="">...</option>
            </optgroup>
        </select>
    </div>
</form>
Month
Day
Year
<form method="post" action="" class="form">
    <label>Choose date</label>
    <div class="row gutters">
        <div class="col col-3">
            <div class="form-item">
                <select><option>---</option></select>
                <div class="desc">Month</div>
            </div>
        </div>
        <div class="col col-3">
            <div class="form-item">
                <select><option>---</option></select>
                <div class="desc">Day</div>
            </div>
        </div>
        <div class="col col-6">
            <div class="form-item">
                <select><option>---</option></select>
                <div class="desc">Year</div>
            </div>
        </div>
    </div>
</form>
( )  ext:
Needed if there are questions about your order
<form method="post" action="" class="form form-inline">
    <div class="form-item">
        <label>Phone number</label>
        ( <input type="text" name="phone-prefix" size="3" class="small"> )
        <input type="text" name="phone-number" class="small w50">
        &nbsp;ext: <input type="text" name="phone-ext" size="3" class="small">
        <div class="desc">...</div>
    </div>
</form>

<form method="post" class="form">
    <div class="row gutters">
        <div class="col col-6">
            <div class="form-item">
                <label>Email</label>
                <input type="email">
            </div>
        </div>
        <div class="col col-6">
            <div class="form-item">
                <label>Topic</label>
                <select>
                    <option value="">...</option>
                </select>
            </div>
        </div>
    </div>
    <div class="form-item">
        <label>Message</label>
        <textarea rows="6"></textarea>
    </div>
</form>
Where are you from?
<form method="post" action="" class="form">
    <div class="row gutters">
        <div class="col col-6">
            <div class="form-item">
                <label>Country</label>
                <select>
                    <option>---</option>
                </select>
                <div class="desc">...</div>
            </div>
        </div>
        <div class="col col-6">
            <div class="form-item">
                <label><br></label>
                <button>Submit</button>
            </div>
        </div>
    </div>
</form>

<form method="post" action="" class="form">
    <div class="form-item">
        <label>Text</label>
        <textarea rows="4"></textarea>
    </div>
</form>

<form method="post" action="" class="form">
    <div class="form-item">
        <label>Text</label>
        <textarea rows="4" class="w50"></textarea>
    </div>
</form>