iPro / Form

Buttons

Buttons are used to signal actions we want our users to act upon.

iPro Guidelines

All buttons in iPro use Open Sans as the primary font. All buttons have no border-radius. Generally, font size will be 14 pixels and most iPro buttons do not have a hover state. All buttons in iPro and ePro have a pointer cursor and text-align center with no text-decoration elements.

Implementation

The examples in iPro demonstrate how to use button elements. To use a button style on a link, add the .btn class to the input button, then choose what type of button will it be such as '.btn-tertiary' or '.btn-primary'. All buttons have a full width class '.btn-fw'.

Guidance

• Generally, use primary buttons for actions that go to the next step or submit the form and use secondary buttons for actions that happen on the current page.
• Style the button most users should click in a way that distinguishes from other buttons on the page.
• Make sure buttons should look clickable — use color variations to distinguish static, hover and active states.
• Avoid using too many buttons on a page.
• Use capitalize case for button labels.
• Button labels should be as short as possible with “trigger words” that your users will recognize to clearly explain what will happen when the button is clicked, for example: "continue", "submit" or "cancel".
• Make the first word of the button's label a verb. For example, instead of "File Upload" label the button "Upload File".
• Icons next to button labels are used at the discretion of the designer (if the functionality warrants it).
• Icon use should be only considered as a case-by-case basis, the color of the icon should always be the same color of the label text.

<button class="btn btn-primary btn-fw btn-md">Primary</button>

<button class="btn btn-secondary btn-md">Secondary</button>

<button class="btn btn-tertiary btn-fw btn-md">Tertiary</button>

Input Fields

By default, text inputs have a full width value of 100%, they are regulated by the size of the container.

There are two trigger states:
1. Active state triggers when the user clicks on the input field.
2. Error states are triggered when the data does not match the validation associated with that input field.

Form Labels

Select Boxes

By default, select drop downs have a full width value of 100%, they are regulated by the size of the container.

There are two trigger states:
1. Active state triggers when the user clicks on the drop down.
2. Error states are triggered when the data does not match the validation associated with that drop down.

<label>Select:</label>
<div class="select">
  <select>
    <option>Select Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

Radio Buttons

Toggle Control

<p>OFF <label class="switch"><input type="checkbox" checked=""><span class="slider"></span></label> ON</p>

Search Form

<div class="input-group">
  <input type="text" class="form-control" aria-label="" placeholder="Search Policy">
  <div class="input-group-append">
      <button type="button" class="btn btn-primary margin-0">Search</button>
  </div>
</div>

Check Boxes

Autofill Search

Autocomplete suggestions work well when they help the user articulate better search queries. It’s not about speeding up the search process but rather about guiding the user and lending them a helping hand in constructing their search query.

Autocomplete suggestions act as reassurance as the user types and sees matches related to their query, often prompting them to add further details to the query as long as relevant autocomplete suggestions keep appearing.

The visual appearance of the autocomplete should not violate these 8 design patterns:

• Style Auxiliary Data Differently
• Avoid Scrollbars & Keep the List Manageable
• Highlight the Differences
• Support Keyboard Navigation
• Match User’s Hover Expectations
• Show Search History
• Reduce Visual Noise
• Consider Including Labels & Instructions

Dependency

Plugin: Typeahead.js

URL: https://twitter.github.io/typeahead.js/

Textarea

Date Picker

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.

<label>Date:
  <input type="text" placeholder="mm/dd/yyyy" class="date-picker-input"  >
</label>

Validation

Provide valuable, actionable feedback to your users with form validation – available in all supported browsers. Choose from the browser default validation feedback or implement custom messages with built-in classes and JavaScript.

Ranges

Date Range

<div class="row">
  <div class="col-sm-2">
    <label>Date (From - To):</label>
  </div>
  <div class="col-sm-7">
    <div class="row">
      <div class="col-sm-3">
        <input type="text" placeholder="mm/dd/yyyy" class="date-picker-input">
      </div>
      <div class="col-sm-1 text-middle">-</div>
      <div class="col-sm-3">
        <input type="text" placeholder="mm/dd/yyyy" class="date-picker-input">
      </div>
    </div>
  </div>
</div>

Multi-Select

Below is a image reference on how the multi-select drop down will look. It is currently in development and this page will be updated as soon as the component is finalized.