Verification Portal
Verification Portal Background Checks Portal

Form Elements

<form class="form_pretty form_secure" style="margin-top: 20px;">
  <label class="textfield">
    <input type="text" />
    <span class="textfield-label">First Name*</span>
  </label>
  <label class="textfield">
    <input type="text" />
    <span class="textfield-label">First Name*</span>
  </label>
  <label class="textfield">
    <input type="text" />
    <span class="textfield-label">First Name*</span>
  </label>
  <label class="checkbox">
    <input type="checkbox" />
    <span class="checkbox-label">Checkbox</span>
  </label>
  <input type="submit" />
</form>

3-1-1 Radio

Radio buttons displayed as blocks, for grouping .radio--block

<label class="radio [modifier class]">
  <input type="radio" name="change1" checked/>
  <span class="radio-label">Radio</span>
</label>
<label class="radio [modifier class]">
  <input type="radio" name="change1" />
  <span class="radio-label">Radio</span>
</label>

3-1-2 Checkbox

Inline Checkbox .checkbox--inline

<label class="checkbox [modifier class]">
  <input type="checkbox" />
  <span class="checkbox-label">Checkbox</span>
</label>

3-2-1 Input and text areas


Textfield with border for displaying on backgrounds other than white. .textfield--label_bordered


Text field with small padding- can be used in conjunction with btn--small .textfield--small


Text field with xsmall padding- can be used in conjunction with btn--xsmall .textfield--xsmall


Textfield with a datepicker wombo combo .textfield--date-picker


<form>
<label class="textfield [modifier class]">
  <input type="text" />
  <span class="textfield-label">First Name*</span>
</label>
<br>
<label class="textfield [modifier class]">
  <textarea></textarea>
  <span class="textfield-label">Message*</span>
</label>
</form>

3-3 Select the width of the selectmenu depends on the width of the original select element

dropdown with small padding-- can be used in conjunction with .btn--small .dropdown--small

dropdown with xsmall padding-- can be used in conjunction with .btn--xsmall .dropdown--xsmall

dropdown with error .error

<form>
  <label class="dropdown [modifier class]">
    <select name="speed" id="speed">
      <option disabled="disabled" selected="selected">Select</option>
      <option>Work It</option>
      <option>Harder</option>
      <option>Better</option>
      <option>Faster</option>
      <option>Stronger</option>
      <option>More Than</option>
      <option>Hour</option>
      <option>Our</option>
      <option>Never</option>
      <option>Ever</option>
      <option>After</option>
      <option>Work is</option>
      <option>Over</option>
    </select>
  </label>
</form>

3-4 Validations

Validation popovers

Error form element icon .validation--error

Valid form element icon .validation--success

<label class="textfield">
  <input type="text" />
  <div class="textfield-label">Validaton</div>
  <div class="validation [modifier class]">
    <div class="validation-label">This is required</div>
  </div>
</label>

3-4-1 Validation Positions

Positioning of validations

Hide validation icon .validation_hidden

Validation label to the right .validation_right

Validation label to the left .validation_left

<label class="textfield">
  <input type="text" />
  <div class="textfield-label">Validaton</div>
  <div class="validation validation--error [modifier class]">
    <div class="validation-label">This is required</div>
  </div>
</label>

3-4-2 Error Class

Styling inputs that have errors

3-4-3 Show/Hide Password Widget

A tiny widget to show or hide passwords. The .widget-toggle_password will trigger password:show or password:hide, and .js-password_toggle on any password field listens to these events to show/hide passwords. Simply call Identity.toggleShowPassword() on any page to make this widget available.

<label class="textfield textfield--label_bordered">
  <input type="password" autocomplete="off" id="password" class="js-password_toggle" />
  <span class="textfield-label">Password</span>
</label>
<span class="widget-toggle_password" data-hidden="Reveal Yourself!" data-showing="Hide Me!"></span>

3-4-4 Widget input and button

A textfield and a button

Verify 
<div class="widget-input_and_button">
  <label class="textfield">
    <input type="text" />
    <div class="textfield-label">Your Email</div>
  </label>
  <span class="btn">Verify</span>
</div>