Design Kit

Picker Group

Picker groups are used to wrap a series of pickers on a single line.

Examples

Base

To render a picker group, wrap a series of pickers in a div and apply the class m-pickerGroup.

Legend
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-pickerGroup">
    <input class="a-picker" type="radio" name="radio-base" id="radio1">
    <label for="radio1">
      Radio1
    </label>
    <input class="a-picker" type="radio" name="radio-base" id="radio2">
    <label for="radio2">
      Radio2
    </label>
    <input class="a-picker" type="radio" name="radio-base" id="radio3">
    <label for="radio3">
      Radio3
    </label>
  </div>
</fieldset>

Texts and icons

Legend
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-pickerGroup">
    <input class="a-picker" type="radio" name="radio-with-icon" id="radio1">
    <label for="radio1">
      <i class="a-icon icon-atom -sm"></i>
      <span>Radio1</span>
    </label>
    <input class="a-picker" type="radio" name="radio-with-icon" id="radio2">
    <label for="radio2">
      <span>Radio2</span>
      <i class="a-icon icon-atom -sm"></i>
    </label>
    <input class="a-picker" type="radio" name="radio-with-icon" id="radio3">
    <label for="radio3">
      <i class="a-icon icon-atom -sm"></i>
      <span>Radio3</span>
      <i class="a-icon icon-atom -sm"></i>
    </label>
  </div>
</fieldset>

Icons

Legend
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-pickerGroup">
    <input class="a-picker" type="radio" name="radio-icon" id="radio1">
    <label for="radio1">
      <span class="-sr--only">Button action</span>
      <i class="a-icon icon-atom -sm"></i>
    </label>
    <input class="a-picker" type="radio" name="radio-icon" id="radio2">
    <label for="radio2">
      <span class="-sr--only">Button action</span>
      <i class="a-icon icon-atom -sm"></i>
    </label>
    <input class="a-picker" type="radio" name="radio-icon" id="radio3">
    <label for="radio3">
      <span class="-sr--only">Button action</span>
      <i class="a-icon icon-atom -sm"></i>
    </label>
  </div>
</fieldset>

Fluid and Responsive

Picker groups can be expanded to fill the parent space by applying the class -fluid. By applying this class picker groups get stacked in smaller viewports.

Horizontal

Legend
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-pickerGroup -fluid">
    <input class="a-picker" type="radio" name="radio-fluid" id="radio1">
    <label for="radio1">
      Radio1
    </label>
    <input class="a-picker" type="radio" name="radio-fluid" id="radio2">
    <label for="radio2">
      Radio2
    </label>
    <input class="a-picker" type="radio" name="radio-fluid" id="radio3">
    <label for="radio3">
      Radio3
    </label>
  </div>
</fieldset>

Alignment

Picker group text is centered by default. However, this behavior can change by applying the modifiers -align--left or -align--right.

Legend
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-pickerGroup -fluid">
    <input class="a-picker" type="radio" name="radio-alignment" id="radio1">
    <label class="-align--left" for="radio1">
      Radio1
    </label>
    <input class="a-picker" type="radio" name="radio-alignment" id="radio2">
    <label for="radio2">
      Radio2
    </label>
    <input class="a-picker" type="radio" name="radio-alignment" id="radio3">
    <label class="-align--right" for="radio3">
      Radio3
    </label>
  </div>
</fieldset>

Disable Fluidity

To disable the fluidity of a specific picker in a fluid picker group, apply the class -notFluid to the picker.

Legend
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-pickerGroup -fluid">
    <input class="a-picker" type="radio" name="radio-nofluid" id="radio1">
    <label for="radio1">
      Radio1
    </label>
    <input class="a-picker" type="radio" name="radio-nofluid" id="radio2">
    <label class="-notFluid" for="radio2">
      Radio2
    </label>
    <input class="a-picker" type="radio" name="radio-nofluid" id="radio3">
    <label for="radio3">
      Radio3
    </label>
  </div>
</fieldset>

Sizes

Picker groups supports a full spectrum of sizes: -sm, -md, -lg, -xl. The default size is -md.

-sm
-md
-lg
-xl
<!-- sm -->
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-pickerGroup">
    <input class="a-picker" type="radio" name="radio-sm-text" id="radio1">
    <label class="-sm" for="radio1">
      Radio1
    </label>
    <input class="a-picker" type="radio" name="radio-sm-text" id="radio2">
    <label class="-sm" for="radio2">
      Radio2
    </label>
    <input class="a-picker" type="radio" name="radio-sm-text" id="radio3">
    <label class="-sm" for="radio3">
      Radio3
    </label>
  </div>
</fieldset>
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-pickerGroup">
    <input class="a-picker" type="radio" name="radio-sm-icon" id="radio-i-1">
    <label class="-sm" for="radio-i-1">
      <span class="-sr--only">Button action</span>
      <i class="a-icon icon-atom -xs"></i>
    </label>
    <input class="a-picker" type="radio" name="radio-sm-icon" id="radio-i-2">
    <label class="-sm" for="radio-i-2">
      <span class="-sr--only">Button action</span>
      <i class="a-icon icon-atom -xs"></i>
    </label>
    <input class="a-picker" type="radio" name="radio-sm-icon" id="radio-i-3">
    <label class="-sm" for="radio-i-3">
      <span class="-sr--only">Button action</span>
      <i class="a-icon icon-atom -xs"></i>
    </label>
  </div>
</fieldset>
<!-- md -->
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-pickerGroup">
    <input class="a-picker" type="radio" name="radio-md-text" id="radio1">
    <label class="-md" for="radio1">
      Radio1
    </label>
    <input class="a-picker" type="radio" name="radio-md-text" id="radio2">
    <label class="-md" for="radio2">
      Radio2
    </label>
    <input class="a-picker" type="radio" name="radio-md-text" id="radio3">
    <label class="-md" for="radio3">
      Radio3
    </label>
  </div>
</fieldset>
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-pickerGroup">
    <input class="a-picker" type="radio" name="radio-md-icon" id="radio-i-1">
    <label class="-md" for="radio-i-1">
      <span class="-sr--only">Button action</span>
      <i class="a-icon icon-atom -sm"></i>
    </label>
    <input class="a-picker" type="radio" name="radio-md-icon" id="radio-i-2">
    <label class="-md" for="radio-i-2">
      <span class="-sr--only">Button action</span>
      <i class="a-icon icon-atom -sm"></i>
    </label>
    <input class="a-picker" type="radio" name="radio-md-icon" id="radio-i-3">
    <label class="-md" for="radio-i-3">
      <span class="-sr--only">Button action</span>
      <i class="a-icon icon-atom -sm"></i>
    </label>
  </div>
</fieldset>
<!-- lg -->
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-pickerGroup">
    <input class="a-picker" type="radio" name="radio-lg-text" id="radio1">
    <label class="-lg" for="radio1">
      Radio1
    </label>
    <input class="a-picker" type="radio" name="radio-lg-text" id="radio2">
    <label class="-lg" for="radio2">
      Radio2
    </label>
    <input class="a-picker" type="radio" name="radio-lg-text" id="radio3">
    <label class="-lg" for="radio3">
      Radio3
    </label>
  </div>
</fieldset>
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-pickerGroup">
    <input class="a-picker" type="radio" name="radio-lg-icon" id="radio-i-1">
    <label class="-lg" for="radio-i-1">
      <span class="-sr--only">Button action</span>
      <i class="a-icon icon-atom -sm"></i>
    </label>
    <input class="a-picker" type="radio" name="radio-lg-icon" id="radio-i-2">
    <label class="-lg" for="radio-i-2">
      <span class="-sr--only">Button action</span>
      <i class="a-icon icon-atom -sm"></i>
    </label>
    <input class="a-picker" type="radio" name="radio-lg-icon" id="radio-i-3">
    <label class="-lg" for="radio-i-3">
      <span class="-sr--only">Button action</span>
      <i class="a-icon icon-atom -sm"></i>
    </label>
  </div>
</fieldset>
<!-- xl -->
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-pickerGroup">
    <input class="a-picker" type="radio" name="radio-xl-text" id="radio1">
    <label class="-xl" for="radio1">
      Radio1
    </label>
    <input class="a-picker" type="radio" name="radio-xl-text" id="radio2">
    <label class="-xl" for="radio2">
      Radio2
    </label>
    <input class="a-picker" type="radio" name="radio-xl-text" id="radio3">
    <label class="-xl" for="radio3">
      Radio3
    </label>
  </div>
</fieldset>
<fieldset>
  <legend class="a-label">Legend</legend>
  <div class="m-pickerGroup">
    <input class="a-picker" type="radio" name="radio-xl-icon" id="radio-i-1">
    <label class="-xl" for="radio-i-1">
      <span class="-sr--only">Button action</span>
      <i class="a-icon icon-atom -sm"></i>
    </label>
    <input class="a-picker" type="radio" name="radio-xl-icon" id="radio-i-2">
    <label class="-xl" for="radio-i-2">
      <span class="-sr--only">Button action</span>
      <i class="a-icon icon-atom -sm"></i>
    </label>
    <input class="a-picker" type="radio" name="radio-xl-icon" id="radio-i-3">
    <label class="-xl" for="radio-i-3">
      <span class="-sr--only">Button action</span>
      <i class="a-icon icon-atom -sm"></i>
    </label>
  </div>
</fieldset>