Lists

Steppers

  • Steppers cannot be embedded within each other
  • Steppers should not extend past 8 options. If the design requires more steps they should be split up into sections of multiple steppers.
  • Steppers can only include radio buttons and checkboxes.
  • Other input forms should use alternate layouts.

View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<ol class="stepper" ng-init="fields = { radio1: '1', radio2: '2' }">
  <li class="stepper-step" number="1" title="Fill Out Your Account With Us Right Now">
    <p>
      <img src="//placekitten.com/g/401/400" />
    </p>
    <div class="form-field" stepper-complete="fields.radio1">
      <div>
        <input id="radio1-1" name="radio1" ng-model="fields.radio1" type="radio" value="1" /><label for="radio1-1">Blue</label>
      </div>
      <div>
        <input id="radio1-2" name="radio1" ng-model="fields.radio1" type="radio" value="2" /><label for="radio1-2">Red</label>
      </div>
    </div>
  </li>
  <li class="stepper-step" number="2" title="Shipping">
    <div class="form-field" stepper-complete="fields.radio2">
      <div>
        <input id="radio2-1" name="radio2" ng-model="fields.radio2" type="radio" value="1" /><label for="radio2-1">Green</label>
      </div>
      <div>
        <input id="radio2-2" name="radio2" ng-model="fields.radio2" type="radio" value="2" /><label for="radio2-2">Purple</label>
      </div>
    </div>
  </li>
  <li class="stepper-step" number="3" subtitle="With a subtitle" title="Billing">
    <div class="form-field" stepper-complete="fields.radio3">
      <div>
        <input id="radio3-1" name="radio3" ng-model="fields.radio3" type="radio" value="1" /><label for="radio3-1">Yellow</label>
      </div>
      <div>
        <input id="radio3-2" name="radio3" ng-model="fields.radio3" type="radio" value="2" /><label for="radio3-2">Turquoise</label>
      </div>
    </div>
  </li><li class="stepper-step" number="4" title="Confirmation">
    <button class="btn btn--primary">Proceed</button>
  </li>
</ol>