Forms

Forms have been styled with some basic states that include active, disabled, and invalid states. These can be declared using default html attributes or with the .invalid class name. A .form-control will default to width: 100%, but multiple form fields can be included on 1 line by wrapping them in a .form-control-group class.

Field Types:

Code Example:

    
        <!-- Normal Field -->
        <div class="form-control">
            <label>Normal Field</label>
            <input type="text" placeholder="Enter some info">
        </div>

        <!-- Invalid Field -->
        <div class="form-control">
            <label>Invalid Field</label>
            <input class="invalid" type="text" placeholder="Enter valid info">
            <p class="validation-error">Please enter a valid value.</p>
        </div>

        <!-- Field Grouping -->
        <div class="form-control-group">
            <div class="form-control">
                <label>Grouped Field 1</label>
                <input type="text" placeholder="Enter valid value 1">
            </div>

            <div class="form-control grow-2x">
                <label>Grouped Field 2</label>
                <input type="text" placeholder="Enter valid value 2">
            </div>
        </div>