Selection Controls

Radio Buttons

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="form-field">
  <div>
    <input id="radio1" name="color" type="radio" />
    <label for="radio1">Cyan</label>
  </div>
  <div>
    <input id="radio2" name="color" type="radio" />
    <label for="radio2">Magenta</label>
  </div>
  <div>
    <input class="form-elemnt form-element--not-available" disabled="" id="radio3" name="color" type="radio" />
    <label for="radio3">Yellow</label>
  </div>
  <div>
    <input disabled="" id="radio4" name="color" type="radio" />
    <label for="radio4">Black</label>
  </div>
  <div>
    <input checked="" disabled="" id="radio5" type="radio" />
    <label for="radio5">Alpha</label>
  </div>
</div>

Checkboxes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="form-field">
  <div>
    <input id="checkbox1" name="color" type="checkbox" />
    <label for="checkbox1">Pepperoni</label>
  </div>
  <div>
    <input id="checkbox2" name="color" type="checkbox" />
    <label for="checkbox2">Mushrooms</label>
  </div>
  <div>
    <input class="form-element form-element--not-available" disabled="" id="checkbox3" name="color" type="checkbox" />
    <label for="checkbox3">Sausage</label>
  </div>
  <div>
    <input disabled="" id="checkbox4" name="color" type="checkbox" />
    <label for="checkbox4">Peppers</label>
  </div>
  <div>
    <input checked="" disabled="" id="checkbox5" type="checkbox" />
    <label for="checkbox5">Eggplant</label>
  </div>
</div>

Pushbuttons

Pushbuttons are visually similar to buttons but they are used to represent a selected state.

Cheese
Meatball
Margherita
Pepperoni
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="u-space-bottom-2">
  <div class="pushbutton pushbutton--selectable">
    Cheese
  </div>
</div>
<div class="u-space-bottom-2">
  <div class="pushbutton pushbutton--selectable pushbutton--selected">
    Meatball
  </div>
</div>
<div class="u-space-bottom-2">
  <div class="pushbutton pushbutton--not-available">
    Margherita
  </div>
</div>
<div class="u-space-bottom-2">
  <div class="pushbutton pushbutton--disabled">
    Pepperoni
  </div>
</div>

Nuggets

Nuggets are mostly used for presentational purposes and has no intrinsic state in that they are not real form elements.

1
2
3
4
5
<div class="nugget nugget--selectable"></div>
<div class="nugget nugget--selectable nugget--selected nugget--deselect-on-hover"></div>
<div class="nugget nugget--selectable nugget--selected nugget--deselect"></div>
<div class="nugget nugget--disabled"></div>

Dropdowns

No options

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
<div class="form-field" ng-init="color = ''">
  <select id="select1" ng-model="color"><option class="label" selected="" value="">
      Size
    </option>
    <option value="wide">
      Some Long Option That Makes The Width Super Wide
    </option>
    <option value="XS">
      Extra Small
    </option>
    <option value="S">
      Small
    </option>
    <option disabled="" value="M">
      Medium (sold out)
    </option>
    <option value="L">
      Large
    </option>
    <option value="XL">
      Extra Large
    </option>
    <option value="XXL">
      Extra Extra Large
    </option></select><label for="select1">Size</label>
</div>

Show Empty Option

Normally the empty option acts as a label for the dropdown and is not displayed as one of the options within the dropdown.

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
<div class="form-field">
  <select data-selectize-hide-empty-option="false" id="select2"><option class="label" selected="" value="">
      Size
    </option>
    <option value="wide">
      Some Long Option That Makes The Width Super Wide
    </option>
    <option value="XS">
      Extra Small
    </option>
    <option value="S">
      Small
    </option>
    <option disabled="" value="M">
      Medium (sold out)
    </option>
    <option value="L">
      Large
    </option>
    <option value="XL">
      Extra Large
    </option>
    <option value="XXL">
      Extra Extra Large
    </option></select><label for="select2">Size</label>
</div>

Auto-width

Without the auto-width option, the width of the dropdown is that of the select element. This is useful for when the dropdown options are generally wider or thinner than the element.

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
<div class="form-field">
  <select data-selectize-auto-width="true" id="select3"><option class="label" selected="" value="">
      Size
    </option>
    <option value="wide">
      Some Long Option That Makes The Width Super Wide
    </option>
    <option value="XS">
      Extra Small
    </option>
    <option value="S">
      Small
    </option>
    <option disabled="" value="M">
      Medium (sold out)
    </option>
    <option value="L">
      Large
    </option>
    <option value="XL">
      Extra Large
    </option>
    <option value="XXL">
      Extra Extra Large
    </option></select><label for="select3">Size</label>
</div>

Auto-width & Align Right

With the auto-width option, the dropdown options will be aligned to the left. However, sometimes the dropdown may need to be aligned to the right instead.

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
<div class="form-field">
  <select data-selectize-align-right="true" data-selectize-auto-width="true" id="select4"><option class="label" selected="" value="">
      Size
    </option>
    <option value="wide">
      Some Long Option That Makes The Width Super Wide
    </option>
    <option value="XS">
      Extra Small
    </option>
    <option value="S">
      Small
    </option>
    <option disabled="" value="M">
      Medium (sold out)
    </option>
    <option value="L">
      Large
    </option>
    <option value="XL">
      Extra Large
    </option>
    <option value="XXL">
      Extra Extra Large
    </option></select><label for="select4">Size</label>
</div>

Not Scroll Blocking

Simulating the behavior of a native dropdown, scrolling is normally disabled when a dropdown is opened. However, an option can be provided to allow scrolling when opened.

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
<div class="form-field">
  <select data-selectize-scroll-blocking="false" id="select5"><option class="label" selected="" value="">
      Size
    </option>
    <option value="wide">
      Some Long Option That Makes The Width Super Wide
    </option>
    <option value="XS">
      Extra Small
    </option>
    <option value="S">
      Small
    </option>
    <option disabled="" value="M">
      Medium (sold out)
    </option>
    <option value="L">
      Large
    </option>
    <option value="XL">
      Extra Large
    </option>
    <option value="XXL">
      Extra Extra Large
    </option></select><label for="select5">Size</label>
</div>

Browser Defualt

An option can be provided to use a native dropdown.

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
<div class="form-field">
  <select browser-default="" id="select6" ng-model="size"><option class="label" selected="" value="">
      Size
    </option>
    <option value="wide">
      Some Long Option That Makes The Width Super Wide
    </option>
    <option value="XS">
      Extra Small
    </option>
    <option value="S">
      Small
    </option>
    <option disabled="" value="M">
      Medium (sold out)
    </option>
    <option value="L">
      Large
    </option>
    <option value="XL">
      Extra Large
    </option>
    <option value="XXL">
      Extra Extra Large
    </option></select><label for="select6">Size</label>
</div>

Sample Selection

Please select a state
Please select a province
Location: {{ location.province }}, {{ location.country }}
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<div class="sample-form" ng-init="location = { country: 'US', province: '' }">
  <div class="form-field">
    <div>
      <input id="country_US" ng-change="location.province = ''" ng-model="location.country" type="radio" value="US" /><label for="country_US">United States</label>
    </div>
    <div>
      <input id="country_CA" ng-change="location.province = ''" ng-model="location.country" type="radio" value="CA" /><label for="country_CA">Canada</label>
    </div>
  </div>
  <div class="form-field" ng-switch="location.country">
    <div ng-switch-when="US">
      <select id="US_province" ng-model="location.province" required="">
        <option class="label" selected="" value="">
          State
        </option>
        <option value="AL">
          Alabama
        </option>
        <option value="AK">
          Alaska
        </option>
        <option value="AZ">
          Arizona
        </option>
      </select><label for="US_province">State</label>
      <div class="form-notice">
        <div class="form-notice__message form-notice__message--required">
          Please select a state
        </div>
      </div>
    </div>
    <div ng-switch-when="CA">
      <select id="CA_province" ng-model="location.province" required="">
        <option class="label" disabled="" selected="" value="">
          Province
        </option>
        <option value="AB">
          Alberta
        </option>
        <option value="BC">
          British Columbia
        </option>
      </select><label for="CA_province">Province</label>
      <div class="form-notice">
        <div class="form-notice__message form-notice__message--required">
          Please select a province
        </div>
      </div>
    </div>
  </div>
  <div>
    <strong>Location:</strong> <span ng-show="location.province">{{ location.province }}, </span><span ng-show="location.country">{{ location.country }} </span>
  </div>
</div>