The cycle select combines a single select dropdown with a toggle button for a very specific use case: limiting and refining the period of time users can review data for.
This component is used on candidate profiles, committee profiles, and election summary pages.
<div class="container" style="padding: 2rem">
<div class="cycle-select">
<label class="cycle-select__label">Election:</label>
<select class="select--alt" name="cycle">
<option value="2016">2016</option>
<option value="2014">2014</option>
<option value="2012">2012</option>
</select>
</div>
<fieldset class="js-subcycle-select">
<legend class="cycle-select__label">Time period:</legend>
<div class="toggles">
<label>
<input type="radio" name="cycle-toggle" checked>
<span class="button--alt">
Full cycle: 2011–2016
</span>
</label>
<label>
<input type="radio" name="cycle-toggle">
<span class="button--alt">
2011–2012
</span>
</label>
<label>
<input type="radio" name="cycle-toggle">
<span class="button--alt">
2013–2014
</span>
</label>
<label>
<input type="radio" name="cycle-toggle">
<span class="button--alt is-disabled">
2015–2016
</span>
</label>
</div>
</fieldset>
</div>
<div class="container" style="padding: 2rem">
<div class="cycle-select">
<label class="cycle-select__label">Election:</label>
<select class="select--alt" name="cycle">
<option value="2016">2016</option>
<option value="2014">2014</option>
<option value="2012">2012</option>
</select>
</div>
<fieldset class="js-subcycle-select">
<legend class="cycle-select__label">Time period:</legend>
<div class="toggles">
<label>
<input type="radio" name="cycle-toggle" checked>
<span class="button--alt">
Full cycle: 2011–2016
</span>
</label>
<label>
<input type="radio" name="cycle-toggle">
<span class="button--alt">
2011–2012
</span>
</label>
<label>
<input type="radio" name="cycle-toggle">
<span class="button--alt">
2013–2014
</span>
</label>
<label>
<input type="radio" name="cycle-toggle">
<span class="button--alt is-disabled">
2015–2016
</span>
</label>
</div>
</fieldset>
</div>
/* No context defined. */