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.

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

Texts and icons

<div class="m-pickerGroup">
  <input class="a-picker" type="radio" name="radios" id="radio1">
  <label for="radio1">
    <i class="a-icon icon-atom -sm"></i>
    <span>Radio1</span>
  </label>
  <input class="a-picker" type="radio" name="radios" id="radio2">
  <label for="radio2">
    <span>Radio2</span>
    <i class="a-icon icon-atom -sm"></i>
  </label>
  <input class="a-picker" type="radio" name="radios" 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>

Icons

<div class="m-pickerGroup">
  <input class="a-picker" type="radio" name="radios" id="radio1">
  <label for="radio1">
    <i class="a-icon icon-atom -sm"></i>
  </label>
  <input class="a-picker" type="radio" name="radios" id="radio2">
  <label for="radio2">
    <i class="a-icon icon-atom -sm"></i>
  </label>
  <input class="a-picker" type="radio" name="radios" id="radio3">
  <label for="radio3">
    <i class="a-icon icon-atom -sm"></i>
  </label>
</div>

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

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

Alignment

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

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

Disable Fluidity

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

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

Sizes

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

-sm

-md

-lg

-xl

<!-- sm -->
<div class="m-pickerGroup">
  <input class="a-picker" type="radio" name="radios" id="radio1">
  <label class="-sm" for="radio1">
    Radio1
  </label>
  <input class="a-picker" type="radio" name="radios" id="radio2">
  <label class="-sm" for="radio2">
    Radio2
  </label>
  <input class="a-picker" type="radio" name="radios" id="radio3">
  <label class="-sm" for="radio3">
    Radio3
  </label>
</div>
<div class="m-pickerGroup">
  <input class="a-picker" type="radio" name="radios" id="radio-i-1">
  <label class="-sm" for="radio-i-1">
    <i class="a-icon icon-atom -xs"></i>
  </label>
  <input class="a-picker" type="radio" name="radios" id="radio-i-2">
  <label class="-sm" for="radio-i-2">
    <i class="a-icon icon-atom -xs"></i>
  </label>
  <input class="a-picker" type="radio" name="radios" id="radio-i-3">
  <label class="-sm" for="radio-i-3">
    <i class="a-icon icon-atom -xs"></i>
  </label>
</div>
<!-- md -->
<div class="m-pickerGroup">
  <input class="a-picker" type="radio" name="radios" id="radio1">
  <label class="-md" for="radio1">
    Radio1
  </label>
  <input class="a-picker" type="radio" name="radios" id="radio2">
  <label class="-md" for="radio2">
    Radio2
  </label>
  <input class="a-picker" type="radio" name="radios" id="radio3">
  <label class="-md" for="radio3">
    Radio3
  </label>
</div>
<div class="m-pickerGroup">
  <input class="a-picker" type="radio" name="radios" id="radio-i-1">
  <label class="-md" for="radio-i-1">
    <i class="a-icon icon-atom -sm"></i>
  </label>
  <input class="a-picker" type="radio" name="radios" id="radio-i-2">
  <label class="-md" for="radio-i-2">
    <i class="a-icon icon-atom -sm"></i>
  </label>
  <input class="a-picker" type="radio" name="radios" id="radio-i-3">
  <label class="-md" for="radio-i-3">
    <i class="a-icon icon-atom -sm"></i>
  </label>
</div>
<!-- lg -->
<div class="m-pickerGroup">
  <input class="a-picker" type="radio" name="radios" id="radio1">
  <label class="-lg" for="radio1">
    Radio1
  </label>
  <input class="a-picker" type="radio" name="radios" id="radio2">
  <label class="-lg" for="radio2">
    Radio2
  </label>
  <input class="a-picker" type="radio" name="radios" id="radio3">
  <label class="-lg" for="radio3">
    Radio3
  </label>
<div class="m-pickerGroup">
  <input class="a-picker" type="radio" name="radios" id="radio-i-1">
  <label class="-lg" for="radio-i-1">
    <i class="a-icon icon-atom -sm"></i>
  </label>
  <input class="a-picker" type="radio" name="radios" id="radio-i-2">
  <label class="-lg" for="radio-i-2">
    <i class="a-icon icon-atom -sm"></i>
  </label>
  <input class="a-picker" type="radio" name="radios" id="radio-i-3">
  <label class="-lg" for="radio-i-3">
    <i class="a-icon icon-atom -sm"></i>
  </label>
</div>
<!-- xl -->
<div class="m-pickerGroup">
  <input class="a-picker" type="radio" name="radios" id="radio1">
  <label class="-xl" for="radio1">
    Radio1
  </label>
  <input class="a-picker" type="radio" name="radios" id="radio2">
  <label class="-xl" for="radio2">
    Radio2
  </label>
  <input class="a-picker" type="radio" name="radios" id="radio3">
  <label class="-xl" for="radio3">
    Radio3
  </label>
<div class="m-pickerGroup">
  <input class="a-picker" type="radio" name="radios" id="radio-i-1">
  <label class="-xl" for="radio-i-1">
    <i class="a-icon icon-atom -sm"></i>
  </label>
  <input class="a-picker" type="radio" name="radios" id="radio-i-2">
  <label class="-xl" for="radio-i-2">
    <i class="a-icon icon-atom -sm"></i>
  </label>
  <input class="a-picker" type="radio" name="radios" id="radio-i-3">
  <label class="-xl" for="radio-i-3">
    <i class="a-icon icon-atom -sm"></i>
  </label>
</div>