Styleguides

Shared Assets & Docs

Menu

Unstyled Form

This is what the inputs look like without any modifying classes.

Text Inputs




   

    




<form>
  <fieldset>
    <legend>Text Inputs</legend>
    <p>
      <label for="text">Text Input:</label><br>
      <input type="text" id="text" placeholder="This is a placeholder">
    </p>
    <p>
      <label for="text">Text Area:</label><br>
      <textarea id="text" rows="4" placeholder="This is a placeholder"></textarea>
    </p>
    <p>
      <label for="checkbox_1"><input type="checkbox" id="checkbox_1" checked> Checkbox 1</label>
      ...
    </p>
    <p>
      <label for="radio_1"><input type="radio" id="radio_1" checked> Radio 1</label>
      ...
    </p>
    <p>
      <label for="file">File Input:</label><br>
      <input type="file" id="file">
    </p>
    <p>
      <label for="select">Select:</label><br>
      <select name="select" id="select">
        <optgroup label="Group 1">
          <option>Option 1</option>
          ...
        </optgroup>
        ...
      </select>
    </p>
    <p>
      <label for="multiple_select">Multiple Select:</label><br>
      <select name="select" id="multiple_select" multiple>
        <option>Option 1</option>
        ...
      </select>
    </p>
    <p>
      <input type="submit" value="Submit Input">
      <button>Submit Button</button>
    </p>
  </fieldset>
</form>

Styled Form

With a little extra markup, you can really jazz up the forms. It might seem like overkill to wrap labels and inputs with .field-label and .field-input, but this allows for a lot flexibility when we start varying the form styles.

<form class="form">
  <div class="field">
    <div class="field-label">
      <label for="text">Text Input:</label>
    </div> <!-- .field-label -->
    <div class="field-input">
      <input type="text" id="text" placeholder="This is a placeholder">
    </div> <!-- .field-input -->
  </div> <!-- .field -->
  <div class="field">
    <div class="field-label">
    <label for="textarea">Text Area:</label>
    </div> <!-- .field-label -->
    <div class="field-input">
      <textarea id="textarea" rows="4" placeholder="This is a placeholder"></textarea>
    </div> <!-- .field-input -->
  </div> <!-- .field -->
  <div class="field">
    <div class="field-input">
      <button class="button big-button primary-button">Submit</button>
    </div> <!-- .field-input -->
  </div> <!-- .field -->
</form>

Horizontal Form

Add a .horizontal-form class to the form to float the labels to the left. They will automatically return to a stacked layout on mobile devices.

<form class="form horizontal-form gray-form">
  <div class="field">
    <div class="field-label">
      <label for="text">Text Input:</label>
    </div> <!-- .field-label -->
    <div class="field-input">
      <input type="text" id="text" placeholder="This is a placeholder">
    </div> <!-- .field-input -->
  </div> <!-- .field -->
  ...
</form>

Gray Form

Use the .gray-form class when the form is on a white background and the inputs aren't clearly visible.

<form class="form gray-form horizontal-form">
  <div class="field">
    <div class="field-label">
      <label for="text">Text Input:</label>
    </div> <!-- .field-label -->
    <div class="field-input">
      <input type="text" id="text" placeholder="This is a placeholder">
    </div> <!-- .field-input -->
  </div> <!-- .field -->
  ...
</form>

Underlined Form

Add a .underlined-form class to the form to get underlined styled inputs. This looks best when used with .horizontal-form.

<form class="form horizontal-form underlined-form">
  <div class="field">
    <div class="field-label">
      <label for="text">Text Input:</label>
    </div> <!-- .field-label -->
    <div class="field-input">
      <input type="text" id="text" placeholder="This is a placeholder">
    </div> <!-- .field-input -->
  </div> <!-- .field -->
  ...
</form>

Form with Messages

Add messages and status indicators to the inputs by using messages along with .success-field, .warning-field, and .error-field classes on the .field-input wrapper. This will highlight the field with the appropriate status color.

This is good.

This is meh.

This is bad.

<form class="form horizontal-form gray-form">
  <div class="field success-field">
    <div class="field-label">
      <label for="text">Text Input:</label>
    </div> <!-- .field-label -->
    <div class="field-input">
      <input type="text" id="text" value="Good Input">
      <p class="success-message">This is good.</p>
    </div> <!-- .field-input -->
  </div> <!-- .field -->
  ...
</form>

Attached Messages

Attach the messages directly to the inputs by adding a .attached-message-field class to the .field-input wrapper.

This is good.

This is meh.

This is bad.

<form class="form horizontal-form gray-form">
  <div class="field success-field attached-message-field">
    <div class="field-label">
      <label for="text">Text Input:</label>
    </div> <!-- .field-label -->
    <div class="field-input">
      <input type="text" id="text" value="Good Input">
      <p class="success-message">This is good.</p>
    </div> <!-- .field-input -->
  </div> <!-- .field -->
  ...
</form>

Form with Icons

Add the icon class (for example: .icon-search) to the .field-input wrapper to add an icon to the field.

<form class="form horizontal-form gray-form">
  <div class="field">
    <div class="field-label">
      <label for="text">Text Input:</label>
    </div> <!-- .field-label -->
    <div class="field-input icon-search">
      <input type="text" id="text" placeholder="This is a placeholder">
    </div> <!-- .field-input -->
  </div> <!-- .field -->
  ...
</form>