Picker groups are used to wrap a series of pickers on a single line.
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>
<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>
<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>
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.
<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>
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>
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>
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>