Forms

Basic

.u-styled-form

Form elements are not styled by default.

To use First.css form styles, apply .u-styled-form class on an element that wraps all your form elements.

<form class="u-styled-form">
    <div>
        <label for="email">Regular input</label>
        <input type="email" id="email" placeholder="Regular input">
    </div>
</form>

Each <div> element inside the .u-styled-form wrapper will create a new line.

<input>

A very basic style. Focused elements receive just a darker border color. And disabled inputs get the traditional grey background.

<form class="u-styled-form">
    <div>
        <label for="input-1">Regular input</label>
        <input type="text" id="input-1">
    </div>
    <div>
        <label for="input-2">Regular input</label>
        <input type="text" id="input-2" disabled>
    </div>
</form>

Radio buttons

<input type="radio">

Radio buttons receive an elegant custom style, with animations.

<form class="u-styled-form">
    <div>
        <input type="radio" name="fake-options" id="radio-1" disabled>
        <label for="radio-1">Disabled input</label>
    </div>
    <div>
        <input type="radio" name="fake-options" id="radio-2" checked disabled>
        <label for="radio-2">Disabled checked input</label>
    </div>
    <div>
        <input type="radio" name="radio-options" id="radio-3" checked>
        <label for="radio-3">Regular input</label>
    </div>
    <div>
        <input type="radio" name="radio-options" id="radio-4">
        <label for="radio-4">Regular input</label>
    </div>
</form>

Checkboxes

<input type="checkbox">

Checkboxes also receive an clean custom style, with smooth transitions.

<form class="u-styled-form">
    <div>
        <input type="checkbox" id="checkbox-1" disabled>
        <label for="checkbox-1">Disabled input</label>
    </div>
    <div>
        <input type="checkbox" id="checkbox-2" checked disabled>
        <label for="checkbox-2">Disabled checked input</label>
    </div>
    <div>
        <input type="checkbox" id="checkbox-3" checked>
        <label for="checkbox-3">Regular input</label>
    </div>
</form>

.mod-plus, .mod-minus or .mod-cross

You can also present a different symbol, instead of the traditional checkmark.

<form class="u-styled-form">
    <div>
        <input type="checkbox" id="checkbox-1">
        <label for="checkbox-1">Regular input</label>
    </div>
    <div>
        <input type="checkbox" id="checkbox-2" class="mod-plus">
        <label for="checkbox-2">Plus input</label>
    </div>
    <div>
        <input type="checkbox" id="checkbox-3" class="mod-minus">
        <label for="checkbox-3">Minus input</label>
    </div>
    <div>
        <input type="checkbox" id="checkbox-4" class="mod-cross">
        <label for="checkbox-4">Cross input</label>
    </div>
</form>

Toggle switches

<input type="checkbox" class="u-input-switch">

Checkboxes could also be presented as a toggle switch. When :checked, the switch change its color to green. Useful, beautiful, made with just CSS.

<form class="u-styled-form">
    <div>
        <input type="checkbox" id="switch-1" class="u-input-switch">
        <label for="switch-1">Toggle switch</label>
    </div>
    <div>
        <input type="checkbox" id="switch-2" class="u-input-switch" checked>
        <label for="switch-2">Toggle switch</label>
    </div>
    <div>
        <input type="checkbox" id="switch-3" class="u-input-switch" checked disabled>
        <label for="switch-3">Disabled toggle switch</label>
    </div>
    <div>
        <input type="checkbox" id="switch-4" class="u-input-switch" disabled>
        <label for="switch-4">Disabled toggle switch</label>
    </div>
</form>

.mod-right

You can also throw the switch to the right.

<form class="u-styled-form">
    <div>
        <input type="checkbox" id="switch-5" class="u-input-switch mod-right">
        <label for="switch-5">Toggle switch on right</label>
    </div>
</form>

Validation with feedback icons

.has-feedback

You can append four feedback icons on your input fields: required fields, success, warning and error alerts. You need to assign .has-feedback class on this field so First.css will include the icon inside of it.

.mod-required

<form class="u-styled-form">
    <div>
        <label for="validation-1">Required Input</label>
        <input type="text" id="validation-1" placeholder="Required Input" class="has-feedback">
        <span data-icon="asterisk" class="input-validation mod-required"></span>
    </div>
</form>

.mod-success

<form class="u-styled-form">
    <div>
        <label for="validation-2">Input with success</label>
        <input type="text" id="validation-2" placeholder="Input with success" class="has-feedback">
        <span data-icon="checkmark" class="input-validation mod-success"></span>
    </div>
</form>

.mod-warning

<form class="u-styled-form">
    <div>
        <label for="validation-3">Input with warning</label>
        <input type="text" id="validation-3" placeholder="Input with warning" class="has-feedback">
        <span data-icon="attention" class="input-validation mod-warning"></span>
    </div>
</form>

.mod-error

<form class="u-styled-form">
    <div>
        <label for="validation-4">Input with error</label>
        <input type="text" id="validation-4" placeholder="Input with error" class="has-feedback">
        <span data-icon="cross" class="input-validation mod-error"></span>
    </div>
</form>

Password Visibility

.password-visibility

Using the following combination of HTML and CSS, you can create a simple password revealer. Just click the checkbox to switch between a text/password input.

<form class="u-styled-form">
    <div class="password-visibility">

        <input type="checkbox" id="password-visibility">
        <label for="password-visibility">
            <span>Show</span> <span>Hide</span> password
        </label>

        <label for="custom-password">Password</label>
        <input type="password" id="custom-password" placeholder="••••••••">
        <input type="text" placeholder="password">

    </div>
</form>

*. This combo almost do everything by itself. Notice that you will also need a JS snippet to clone the typed password from one field to another. An example is included in our repository on GitHub. Test it locally.