Moody's CRE

Form

Required

Use a red .dot in the labels of required fields. Make sure to signify somewhere on the form that the red dot means required.

Required field

<p class="right-align italic"><span class="dot bg--red"></span> Required field</p>

<div class="mb1">
    <label>Required Input <span class="dot bg--red"></span></label>
    <input class="form-control" type="text" required>
</div>

<div class="mb1">
    <label>Normal Input</label>
    <input class="form-control" type="text">
</div>

<div>
    <label>Textarea <span class="dot bg--red"></span></label>
    <textarea class="form-control" required></textarea>
</div>

Validation

danger is used for a blocking field, like one that's required but hasn't been filled out yet. warning works well for fields that are invalid, or soft validation before a user attempts to submit a form. success is best for situations when you have per-field validation throughout a form and want to encourage a user through the rest of the fields. However, success shouldn't be used all the time – only when there's a specific reason. It's a good idea to give both a general error message and a field-specific one.

inputs should be wrapped in their own divs in order to control spacing. We can then apply one of the validation classes to those divs. If it's a checkbox or radio, we'll need to put the class on its label.

Success! You've done it.
Shucks, check the formatting of that and try again.
Sorry, that username's taken. Try another?
<div class="mb1 validation--success">
    <label>Name</label>
    <input class="form-control" type="text">
    <div class="alert alert--success mt1">Success! You've done it.</div>
</div>
<div class="mb1 validation--warning">
    <label>Email</label>
    <input class="form-control" type="email">
    <div class="alert alert--warning mt1">Shucks, check the formatting of that and try again.</div>
</div>
<div class="validation--danger">
    <label>Username</label>
    <input class="form-control" type="text">
    <div class="alert alert--danger mt1">Sorry, that username's taken. Try another?</div>
</div>

Inline Labels

We will default to this view whenever it works. Use the grid to force labels inline: wrap the whole part of the form that will have these inline labels (nothing else) in .grid-row, and then wrap each label and control/input in a div with .grid-column and whatever span you desire. Also wrap it all in .form--inline-labels to make the labels have the correct padding. Be sure to include .flex and .align-items-center on the labels.

<div class="form--inline-labels grid-row">
    <div class="grid-column span-6 mb2">
        <label class="flex align-items-center">Text</label>
    </div>
    <div class="grid-column span-18 mb2">
        <input class="form-control" type="text">
    </div>
    <div class="grid-column span-6 mb2">
        <label class="flex align-items-center">Email</label>
    </div>
    <div class="grid-column span-18 mb2">
        <input class="form-control" type="email">
    </div>
    <div class="grid-column span-6 mb2">
        <label class="flex align-items-center">Password</label>
    </div>
    <div class="grid-column span-18 mb2">
        <input class="form-control" type="password">
    </div>
    <div class="grid-column span-6">
        <label class="flex align-items-center">Textarea</label>
    </div>
    <div class="grid-column span-18">
        <textarea class="form-control"></textarea>
    </div>
</div>

See also