Selection Controls

Pushbuttons

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

Standard Theme

1
2
3
4
5
6
7
8
9
10
11
12
<div class="u-space-bottom-2">
  <button class="pushbutton pushbutton--selectable">Cheese</button>
</div>
<div class="u-space-bottom-2">
  <button class="pushbutton pushbutton--selectable pushbutton--selected">Meatball</button>
</div>
<div class="u-space-bottom-2">
  <button class="pushbutton pushbutton--not-available" tabindex="-1">Margherita</button>
</div>
<div class="u-space-bottom-2">
  <button class="pushbutton pushbutton--disabled" tabindex="-1">Pepperoni</button>
</div>

Light Theme

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="u-space-bottom-2">
  <button class="pushbutton pushbutton--light pushbutton--selectable">Cheese</button>
</div>
<div class="u-space-bottom-2">
  <button class="pushbutton pushbutton--light pushbutton--selected pushbutton--selectable">Meatball</button>
</div>
<div class="u-space-bottom-2">
  <button class="pushbutton pushbutton--not-available" tabindex="-1">Margherita</button>
</div>
<div class="u-space-bottom-2">
  <button class="pushbutton pushbutton--disabled" tabindex="-1">Pepperoni</button>
</div>

Large

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="u-space-bottom-2">
  <button class="pushbutton pushbutton--selectable pushbutton--large">Cheese</button>
</div>
<div class="u-space-bottom-2">
  <button class="pushbutton pushbutton--selected pushbutton--large">Meatball</button>
</div>
<div class="u-space-bottom-2">
  <button class="pushbutton pushbutton--not-available pushbutton--large" tabindex="-1">Margherita</button>
</div>
<div class="u-space-bottom-2">
  <button class="pushbutton pushbutton--disabled pushbutton--large" tabindex="-1">Pepperoni</button>
</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 checked="" 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>

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 checked="" id="radio2" name="color" type="radio" />
    <label for="radio2">Magenta</label>
  </div>
  <div>
    <input class="form-element 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>

Nuggets

Nuggets are mostly used for presentational purposes and can act like a button.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="nugget nugget--empty nugget--selectable">
  <span custicon="chevron-left"></span>
</div>
<div class="nugget nugget--empty nugget--selectable">
  <span custicon="chevron-right"></span>
</div>
<div class="nugget nugget--empty nugget--selected">
  <span custicon="lock"></span>
</div>
<div class="nugget nugget--empty nugget--selectable">
  <span custicon="shopping-cart"></span>
</div>
<div class="nugget nugget--empty nugget--disabled">
  <span custicon="chevron-left"></span>
</div>
<div class="nugget nugget--empty nugget--disabled">
  <span custicon="chevron-right"></span>
</div>

Stateful

It can be used as a replacement for a checkboxes when it is stateful.

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

Chips

$50 - $99
$100 +
Small
Large
32"
33"
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
<div class="chip u-space-right-1 u-space-bottom-1">
  <div class="chip__content">
    $50 - $99
  </div>
</div>
<div class="chip u-space-right-1 u-space-bottom-1">
  <div class="chip__content">
    $100 +
  </div>
  <div class="chip__action">
    <div custicon="close" responsive-icon="true"></div>
  </div>
</div>
<div class="chip u-space-right-1 u-space-bottom-1">
  <div class="chip__content">
    Small
  </div>
</div>
<div class="chip u-space-right-1 u-space-bottom-1">
  <div class="chip__content">
    Large
  </div>
  <div class="chip__action">
    <div custicon="close" responsive-icon="true"></div>
  </div>
</div>
<div class="chip u-space-right-1 u-space-bottom-1">
  <div class="chip__content">
    32"
  </div>
</div>
<div class="chip u-space-right-1 u-space-bottom-1">
  <div class="chip__content">
    33"
  </div>
  <div class="chip__action">
    <div custicon="close" responsive-icon="true"></div>
  </div>
</div>

Dropdowns

Standard

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
<div class="form-field">
  <select aria-labelledby="select1-label" id="select1"><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" id="select1-label">Size</label>
</div>
<div class="form-field u-space-bottom-0">
  <select aria-labelledby="select2-label" disabled="" id="select2"></select><label for="select2" id="select2-label">Size (Disabled)</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 u-space-bottom-0">
  <select aria-labelledby="select3-label" 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" id="select3-label">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 u-space-bottom-0">
  <select aria-labelledby="select4-label" 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" id="select4-label">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 u-space-bottom-0">
  <select aria-labelledby="select5-label" 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" id="select5-label">Size</label>
</div>

Browser Default

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
28
29
30
<div class="form-field">
  <select aria-labelledby="select6-label" 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" id="select6-label">Size</label>
</div>
<div class="form-field u-space-bottom-0">
  <select aria-labelledby="select7-label" browser-default="" disabled="" id="select7" ng-model="size"></select><label for="select7" id="select7-label">Size (Disabled)</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
<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-init="options = [{ id: '', label: 'State' }, { id: 'AL', label: 'Alabama' }, { id: 'AK', label: 'Alaska' }]; region = { selection: options[0] }" ng-switch-when="US">
      <select aria-label="State" id="US_province" ng-change="location.province = region.selection.id" ng-model="region.selection" ng-options="option.label for option in options track by option.id" required=""></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 aria-label="Province" 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>