Selection Controls

Pushbuttons

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

Standard Theme

View Source 
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

View Source 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="sample-block sample-block--dark">
  <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--light pushbutton--not-available" tabindex="-1">Margherita</button>
  </div>
  <div>
    <button class="pushbutton pushbutton--light pushbutton--disabled" tabindex="-1">Pepperoni</button>
  </div>
</div>

Large

View Source 
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

View Source 
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

View Source 
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.

View Source 
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.

View Source 
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

Standard

$50 - $99
$100+
Slim
Small
Large
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

<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 chip--slim u-space-right-1 u-space-bottom-1">
  <div class="chip__content">
    Slim
  </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>

Dark

$50 - $99
$100+
Slim
Small
Large
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

<div class="chip chip--dark u-space-right-1 u-space-bottom-1">
  <div class="chip__content">
    $50 - $99
  </div>
</div>
<div class="chip chip--dark 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 chip--dark chip--slim u-space-right-1 u-space-bottom-1">
  <div class="chip__content">
    Slim
  </div>
</div>
<div class="chip chip--dark u-space-right-1 u-space-bottom-1">
  <div class="chip__content">
    Small
  </div>
</div>
<div class="chip chip--dark 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>

Select Dropdowns

Primary

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

<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>

Secondary

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

<div class="form-field form-field--secondary">
  <select aria-labelledby="select1b-label" id="select1b"><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="select1b" id="select1b-label">Size</label>
</div>
<div class="form-field form-field--secondary u-space-bottom-0">
  <select aria-labelledby="select2b-label" disabled="" id="select2b"></select><label for="select2b" id="select2b-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.

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

<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.

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

<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.

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

<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.

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

<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>

Show empty option as placeholder

An option can be provided to use the empty option as placeholder while dropdown is active

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

<div class="form-field">
  <select aria-labelledby="select8-label" data-selectize-empty-option-as-placeholder="true" id="select8" ng-model="size">
    <option class="label" selected="" value="">
      Select an option
    </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="select8" id="select8-label">Size</label>
</div>
<div class="form-field u-space-bottom-0">
  <select aria-labelledby="select9-label" data-selectize-empty-option-as-placeholder="true" disabled="" id="select9" ng-model="size"></select><label for="select9" id="select9-label">Size (Disabled)</label>
</div>

Read-Only

An option that will cause the input element to be read-only; introduced as a means to disable the on-screen keyboard on a mobile device.

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

<div class="form-field u-space-bottom-0">
  <select aria-labelledby="select10-label" id="select10" selectize-read-only="true"><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="select10" id="select10-label">Size</label>
</div>

Sample Selection

Please select a state
Please select a province
Location: {{ location.province }}, {{ location.country }}
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
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>