Documentation

Heads Up! Components & docs are subject to change until official v1.0 release. ×

Forms

When working with forms make sure to always wrap your input fields inside a parent <form> element. You can also use .form__group to space out your input fields vertically.

<form>

<!-- Add Form Inputs Here --> <div class="form__group"> <label for="ex1">Text</label> <input type="text" id="ex1" name="ex1" placeholder="Text..."> </div>
</form>

Input Fields & Textareas

<label for="ex1">Text</label>
<input type="text" id="ex1" name="ex1" placeholder="Text...">

<label for="ex2">Password</label>
<input type="password" id="ex2" name="ex2" placeholder="Password...">

<label for="ex3">Email</label>
<input type="email" id="ex3" name="ex3" placeholder="Email...">

<label for="ex0">Comment</label>
<textarea id="ex0" name="ex0" placeholder="Comment..."></textarea>

Labels w/ Required Fields

<label class="label--required" for="ex1">Text</label>
<input type="text" id="ex1" name="ex1" placeholder="Text...">

Datepicker

<label for="ex3">Email</label>
<input type="text" id="ex3" name="ex3" class="datepicker" placeholder="01/01/16...">

Select Fields

<label for="example1">Select Type</label>
<select name="example1" id="example1">
  <option value="">-- Select Type --</option>
  <option value="1">Jedi</option>
  <option value="2">Wookie</option>
  <option value="3">Sith</option>
</select>