Form

Forms come in all forms and shapes in Kube, and you can do all sorts of things with them. 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="">

    <div class="form-item">
        <label>Name</label>
        <input type="text" name="name" class="w50">
    </div>

    <div class="form-item">
        <label>Country</label>
        <select>
            <option value="">---</option>
        </select>
    </div>

    <div class="form-item">
        <label class="is-checkbox"><input type="checkbox"> Check me</label>
        <label class="is-checkbox"><input type="radio"> Radio me</label>
    </div>

    <div class="form-item">
        <textarea rows="6"></textarea>
    </div>

    <div class="form-item is-buttons">
        <button class="button">Log in</button>
        <button class="button is-tertiary">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>
    <div class="form-item">
        <label>Label</label>
        <input type="text">
        <div class="is-desc">...</div>
    </div>
</form>

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

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

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

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

Here's a search input with the icon as the helper. This allows the user to immediately understand that the search field is in front of him.

<form>
    <div class="form-item">
        <input type="text" class="is-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="">
    <div class="form-item form-checkboxes">
        <label class="is-checkbox"><input type="checkbox"> Check 1</label>
        ...
    </div>
</form>
<form method="post" action="">
    <div class="form-item">
        <label class="is-checkbox"><input type="checkbox"> Check 1</label>
        ...
    </div>
</form>
<form method="post" action="">
    <div class="form-item form-checkboxes">
        <label class="is-checkbox"><input type="radio"> Check 1</label>
        ...
    </div>
</form>
<form method="post" action="">
    <div class="form-item">
        <label class="is-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
<form method="post" action="">
    <fieldset>
        <legend>Login data</legend>
        <div class="form-item">
            <label>Name</label>
            <input type="text" name="name" class="is-50">
        </div>
        <div class="form-item">
            <label>Phone</label>
            <input type="phone" name="phone" class="is-50">
        </div>
    </fieldset>
</form>
About
<form method="post" action="">
    <fieldset>
        <legend>About</legend>
        <div class="form-item">
            <textarea name="user-about" rows="5"></textarea>
        </div>
        <div class="form-item">
            <button class="button">Submit</button>
        </div>
    </fieldset>
</form>

Width #

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

<form method="post" action="">
    <div class="form-item">
        <input type="text" class="is-25">
    </div>
    <div class="form-item">
        <input type="text" class="is-50">
    </div>
    <div class="form-item">
        <input type="text" class="is-75">
    </div>
    <div class="form-item">
        <input type="text" value="100% by default">
    </div>
</form>

States #

By default, Kube features three different states: success, error and warning.

<form method="post" action="">
    <div class="form-item">
        <label>Your height <span class="is-success">...</span></label>
        <input type="text" class="is-success">
    </div>
</form>
<form method="post" action="">
    <div class="form-item">
        <label>Enter your weight <span class="is-error">...</span></label>
        <input type="text" class="is-error">
    </div>
</form>
<form method="post" action="">
    <div class="form-item">
        <label>Enter your weight <span class="is-warning">...</span></label>
        <input type="text" class="is-warning">
    </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="">
    <div class="form-item">
        <label>Email <span class="is-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="">
    <div class="form-item">
        <label>Name <span class="is-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="is-desc">...</div>
    </div>
</form>

Disabled #

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

<input type="text" value="" disabled>
<input type="checkbox" class="is-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="">
    <div class="form-item">
        <label>How much is it?</label>
        <div class="is-prepend is-50">
            <span>$</span>
            <input type="text">
        </div>
    </div>
</form>
$
<form method="post" action="">
    <div class="form-item">
        <label>It is much how?</label>
        <div class="is-append">
            <input type="text">
            <span>$</span>
        </div>
    </div>
</form>
<form method="post" action="">
    <div class="form-item">
        <label>It is much how?</label>
        <div class="is-append">
            <input type="text">
            <a href="#" class="icon-kube-calendar"></a>
        </div>
    </div>
</form>

Button Append #

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

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

Inline #

Set the .is-inline class for form-item to display the label of input on the left side. By default the left margin is 150px, you can change it in the variables of Kube.

Please enter your email.
$
<form method="post" action="">

    // label on the left side
    <div class="form-item is-inline">
        <label>Name</label>
        <input type="text" name="name" class="is-50">
        <div class="is-desc">Please enter your email.</div>
    </div>

    // the full width of item without left shift
    <div class="form-item">
        <textarea rows="6"></textarea>
    </div>

    // add the left shift for the item
    <div class="form-item is-buttons is-inline-offset">
        <button class="button">Log in</button>
        <button class="button is-tertiary">Cancel</button>
    </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="">
    <div class="form-item">
        <label>Select multiple</label>
        <select class="is-50" multiple="multiple" size="10">
            <optgroup label="Group 1">
                <option value="">...</option>
            </optgroup>
        </select>
    </div>
</form>
Month
Day
Year
<form method="post" action="">
    <label>Choose date</label>
    <div class="is-row">
        <div class="form-item is-col">
            <select><option>---</option></select>
            <div class="is-desc">Month</div>
        </div>
        <div class="form-item is-col">
            <select><option>---</option></select>
            <div class="is-desc">Day</div>
        </div>
        <div class="form-item is-col">
            <select><option>---</option></select>
            <div class="is-desc">Year</div>
        </div>
    </div>
</form>
( )  ext:
Needed if there are questions about your order
<form method="post" action="">
    <div class="form-item is-bar">
        <label>Phone number</label>
        ( <input type="text" name="phone-prefix" size="3"> )
        <input type="text" name="phone-number" class="is-50">
        &nbsp;ext: <input type="text" name="phone-ext" size="3">
        <div class="is-desc">...</div>
    </div>
</form>
<form method="post">
    <div class="is-row">
        <div class="form-item is-col">
            <label>Email</label>
            <input type="email">
        </div>
        <div class="form-item is-col">
            <label>Topic</label>
            <select>
                <option value="">...</option>
            </select>
        </div>
    </div>
    <div class="form-item">
        <label>Message</label>
        <textarea rows="6"></textarea>
    </div>
</form>
Where are you from?
<form method="post" action="">
    <div class="is-row">
        <div class="form-item is-col">
            <label>Country</label>
            <select>
                <option>---</option>
            </select>
            <div class="is-desc">...</div>
        </div>
        <div class="form-item is-col">
            <label><br></label>
            <button class="button">Submit</button>
        </div>
    </div>
</form>
<form method="post" action="">
    <div class="form-item">
        <label>Text</label>
        <textarea rows="4"></textarea>
    </div>
</form>
<form method="post" action="">
    <div class="form-item">
        <label>Text</label>
        <textarea rows="4" class="is-50"></textarea>
    </div>
</form>