Basic form

Forms take several orientations and have versatile validation styles.

Wrap sets of form elements in a .form_group to keep proper spacing.

Wrap sets of form elements in an element using form_group() to keep proper spacing.

<form class="form">
  <div class="form_group">
    <label for="fname">First name</label>
    <input id="fname" type="text" />
  </div>
  <div class="form_group">
    <label for="lname">Last name</label>
    <input id="lname" type="text" />
  </div>
  <div class="form_group">
    <label for="file">Avatar</label>
    <input id="file" type="file" />
  </div>
  <div class="form_group">
    <label>Issue Size</label>

    <label>
      <input id="small" type="checkbox" />
      Small
    </label>

    <label>
      <input id="small" type="checkbox" />
      Regular
    </label>

    <label>
      <input id="small" type="checkbox" />
      Large
    </label>
  </div>
  ...
  <input type="submit" />
</form>

<form>
  <div class="group">
    <label for="fname">First name</label>
    <input id="fname" type="text" />
  </div>
  <div class="group">
    <label for="lname">Last name</label>
    <input id="lname" type="text" />
  </div>
  <div class="group">
    <label for="file">Avatar</label>
    <input id="file" type="file" />
  </div>
  <div class="group">
    <label>Issue Size</label>

    <label>
      <input id="small" type="checkbox" />
      Small
    </label>

    <label>
      <input id="small" type="checkbox" />
      Regular
    </label>

    <label>
      <input id="small" type="checkbox" />
      Large
    </label>
  </div>
  ...
  <input type="submit" />
</form>

form {
  @include form();
}
.group {
  @include form_group();
}

Horizontal

textarea elements are not included in default styling of horizontal forms.

Both the form() and form_group() mixins need to pass in horizontal as a parameter. This is because it is possible to have a vertical form with both horizontal and vertical form groups

Simply add .form-horizontal to .form to convert to a horizontal form.

<form>
  <div class="group">
    <label for="fname">First name</label>
    <input name="fname" type="text" />
    <input type="submit" />
  </div>
</form>

form {
  @include form('horizontal');
}
.group {
  @include form_group('horizontal');
}

<form class="form form-horizontal">
  <div class="form_group">
    <label for="fname">First name</label>
    <input name="fname" type="text" />
    <input type="submit" />
  </div>
</form>

Left-aligned

For left-aligned forms, simply use the grid.

Add row to the form_group
Add column styles to labels
Either put inputs and text fields in column elements or apply column styling directly.

Using checkboxes and radio buttons: Because the left-aligned form will right-align labels, you'll need to specify your checkbox and radio button labels as either .checkbox or .radio to preserve left-alignment. (Or apply this via CSS.)

<form class="form form-left">
  <div class="form_group row">
    <label for="fname" class="col-third">First name</label>
    <div name="col-twothirds" class="input">
      <input type="text" placeholder="john" />
    </div>
  </div>
  <div class="form_group row">
    <label for="lname" class="col-third">Last name</label>
    <div name="lname" class="twothirds">
      <input type="text" placeholder="Smith" />
    </div>
  </div>
  <div class="form_group row">
    <label for="bio" class="col-third">Bio</label>
    <div name="bio" class="col-twothirds">
      <textarea name="bio"></textarea>
    </div>
  </div>
  <div class="form_group row">
    <label class="checkbox col-twothirds col-left-third">
      <input type="checkbox" />
      Sign up for newsletter
    </label
  </div>
  <div class="form_group row">
    <label for="industry" class="col-third">Industry</label>
    <div name="industry" class="input" class="col-twothirds">
      <select>
        <option>Academic</option>
        ...
      </select>
    </div>
  </div>
  <footer class="row">
    <div class="col-twothirds col-left-third">
      <input type="submit" role="button" class="button button-primary" />
    </div>
  </footer>
</form>

<form>
  <div class="fname">
    <label for="fname">First name</label>
    <div name="fname" class="input">
      <input type="text" placeholder="john" />
    </div>
  </div>
  <div class="lname">
    <label for="lname">Last name</label>
    <div name="lname" class="input">
      <input type="text" placeholder="Smith" />
    </div>
  </div>
  <div class="bio">
    <label for="bio">Bio</label>
    <div name="bio" class="input">
      <textarea name="bio"></textarea>
    </div>
  </div>
  <div class="newsletter">
    <label class="checkbox">
      <input type="checkbox" />
      Sign up for newsletter
    </label
  </div>
  <div class="industry">
    <label for="industry">Industry</label>
    <div name="industry" class="input">
      <select>
        <option>Academic</option>
        ...
      </select>
    </div>
  </div>
  <footer>
    <div class="submit">
      <input type="submit" role="button" class="button" />
    </div>
  </footer>
</form>

form {
  @include form($layout: 'left');

  footer {
    @include row();
  }
}
.fname, .lname, .bio, .newsletter, .industry {
  @include form_group();
  @include row();
}
label {
  @include column('third');
}
.input {
  @include column('twothirds');
}
.checkbox {
  @include column('twothirds', $left: 'third');
}
.submit {
  @include column('twothirds', $left: 'third');

  input {
    +button($primary-color)
  }
}

Mixed

Use several orientations in one form element

<form class="form">
  <div class="form_group">
    <label for="name">Name</label>
    <input id="name" type="text" />
  </div>
  <div class="form_group">
    <label for="email">Email</label>
    <input id="email" type="text" />
  </div>
  <label for="citystate">City, state, zip</label>
  <div class="form_group form_group-horizontal">
    <input id="citystatezip" type="text" style="width: 125px" />
    <input type="text" style="width: 75px" />
    <input type="number" style="width: 100px" />
  </div>
  <div class="form_group form_group-horizontal">
    <label for="prefix">Prefix</label>
    <input type="text" style="width: 75px" id="prefix" />

    <label for="suffix">Suffix</label>
    <input type="text" style="width: 75px" id="suffix" />
  </div>
</form>

<form>
  <div class="group">
    <label for="name">Name</label>
    <input id="name" type="text" />
  </div>
  <div class="group">
    <label for="email">Email</label>
    <input id="email" type="text" />
  </div>
  <label for="citystate">City, state, zip</label>
  <div class="location">
    <input id="citystatezip" type="text" style="width: 125px" />
    <input type="text" style="width: 75px" />
    <input type="number" style="width: 100px" />
  </div>
  <div class="extra">
    <label for="prefix">Prefix</label>
    <input type="text" style="width: 75px" id="prefix" />

    <label for="suffix">Suffix</label>
    <input type="text" style="width: 75px" id="suffix" />
  </div>
</form>

form {
  @include form();
}
.group {
  @include form_group();
}
.location, extra {
  @include form_group('horizontal');
}

States

Disabled inputs are grayed out and receive a disabled cursor.

<input type="email" value="john@example.com" disabled />

Validation

Three classes can be used to style form components for validation: error(s), success(es), and warning(s).

Singular

The classes can be directly applied to the elements:

<input class="error" type="email" />
<p class="error">Please enter a valid email</p>

Plural

Or to a direct parent via the plural class.

When using the plural class, this can be wrapped below the form group element to select exactly the parts that need to be colored.

...
<div class="form_group">
  <div class="errors">
    <input type="email" />
    <p>Please enter a valid email</p>
  </div>
</div> 

<div class="form_group">
  <div class="sucesses">
    <input type="text" id="name" />
    <p>Username is available!</p>
  </div>
</div>
...

Success

<div class="form_group">
  <label class="success" for="fName">
  <input class="success" type="text" placeholder="John" name="fName"/>
  <p class="warning">Thanks!</p>
</div>

<div class="form_group">
  <label class="success" for="fName">
  <input class="success" type="text" placeholder="John" name="fName"/>
  <p class="warning">Thanks!</p>
</div>

form {
  @include form();
}
.form_group {
  @include form_group();
}

Error

<div class="form_group">
  <label class="error" for="fName">
  <input class="error" type="text" placeholder="John" id="fName"/>
  <p class="error">Please enter a valid first name</p>
</div>

<div class="form_group">
  <label class="error" for="fName">
  <input class="error" type="text" placeholder="John" id="fName"/>
  <p class="error">Please enter a valid first name</p>
</div>

form {
  @include form();
}
.form_group {
  @include form_group();
}

Warning

<div class="form_group">
  <label class="warning" for="fName">
  <input class="warning" type="text" placeholder="John" name="fName"/>
  <p class="warning">This information will be public</p>
</div>

<div class="form_group">
  <label class="warning" for="fName">
  <input class="warning" type="text" placeholder="John" name="fName"/>
  <p class="warning">This information will be public</p>
</div>

form {
  @include form();
}
.form_group {
  @include form_group();
}

Mixed

Just an example of using multiple error classes, both plural and singluar.

// See individual snippets above.