Segmented Control /w Checkbox
Turn a bunch of checkbox buttons into a segmented control.
<div class="c-segmented-control">
<label class="c-segmented-control__label">
<input class="c-input c-input--checkbox" type="checkbox" name="segmented-name" value="1">
<span class="c-segmented__indicator">
1
</span>
</label>
<label class="c-segmented-control__label">
<input class="c-input c-input--checkbox" type="checkbox" name="segmented-name" value="2">
<span class="c-segmented__indicator">
2
</span>
</label>
<label class="c-segmented-control__label">
<input class="c-input c-input--checkbox" type="checkbox" name="segmented-name" value="3">
<span class="c-segmented__indicator">
3
</span>
</label>
<label class="c-segmented-control__label">
<input class="c-input c-input--checkbox" type="checkbox" name="segmented-name" value="4">
<span class="c-segmented__indicator">
4
</span>
</label>
<label class="c-segmented-control__label">
<input class="c-input c-input--checkbox" type="checkbox" name="segmented-name" value="5">
<span class="c-segmented__indicator">
5
</span>
</label>
<label class="c-segmented-control__label">
<input class="c-input c-input--checkbox" type="checkbox" name="segmented-name" value="6">
<span class="c-segmented__indicator">
6+
</span>
</label>
</div>Segmented Control /w Radio Buttons
Turn a bunch of radio buttons into a segmented control.
<div class="c-segmented-control">
<label class="c-segmented-control__label">
<input class="c-input c-input--radio" type="radio" name="segmented-name" value="1">
<span class="c-segmented__indicator">
1
</span>
</label>
<label class="c-segmented-control__label">
<input class="c-input c-input--radio" type="radio" name="segmented-name" value="2">
<span class="c-segmented__indicator">
2
</span>
</label>
<label class="c-segmented-control__label">
<input class="c-input c-input--radio" type="radio" name="segmented-name" value="3">
<span class="c-segmented__indicator">
3
</span>
</label>
<label class="c-segmented-control__label">
<input class="c-input c-input--radio" type="radio" name="segmented-name" value="4">
<span class="c-segmented__indicator">
4
</span>
</label>
<label class="c-segmented-control__label">
<input class="c-input c-input--radio" type="radio" name="segmented-name" value="5">
<span class="c-segmented__indicator">
5
</span>
</label>
<label class="c-segmented-control__label">
<input class="c-input c-input--radio" type="radio" name="segmented-name" value="6">
<span class="c-segmented__indicator">
6+
</span>
</label>
</div>