Formrow

.Formrow

The Formrow component should be used as a wrapper for inputs and labels.

On smaller screen sizes the label and input field will stack on top of each other.

Example

@atomia.com

Markup

<div class="Formrow ">
    <label class="Formrow-label" for="email">Email</label>

    <div class="Formrow-offset">
        <input class="Formrow-input" type="text" id="email" placeholder="Name"> &#64;atomia.com
    </div>
</div>

Formrow variations

A number of modifier classes are available for use with Formrow.

Modifiers

Formrow--block
Formrow used in small spaces, like the sidebar
@atomia.com
The message, e.g. a validation message
Formrow--noLabel
Formrow without a label
@atomia.com
The message, e.g. a validation message
Formrow--optional
Optional input
@atomia.com
The message, e.g. a validation message
Formrow--required
Required input (obsolete)
@atomia.com
The message, e.g. a validation message
Formrow--success
Display input success message
@atomia.com
The message, e.g. a validation message
Formrow--info
Display input info message
@atomia.com
The message, e.g. a validation message
Formrow--warning
Display input warning message
@atomia.com
The message, e.g. a validation message
Formrow--error
Display input error message
@atomia.com
The message, e.g. a validation message
Formrow--noLabel.Formrow--warning
Input without label, marked as warning
@atomia.com
The message, e.g. a validation message

Markup

<div class="Formrow [modifier class]">
    <label class="Formrow-label" for="email" data-opt="optional">Email</label>

    <div class="Formrow-offset">
        <input class="Formrow-input" type="text" id="email" placeholder="Name"> &#64;atomia.com
    </div>

    <div class="Formrow-offset Formrow-message">
        The message, e.g. a validation message
    </div>
</div>