A styled set of radio buttons that can have a single entry selected at any one time. Use a toggle button when the interaction indicates whether a setting is on or off for an entire view. Toggles should have as few options as possible.
<div id="filters" class="filters is-open" style="border: none; padding: 20px;">
<fieldset class="filter toggles js-filter js-table-switcher" style="border: none;">
<legend class="label t-inline-block">Data type</legend>
<div class="row">
<label for="switcher-processed" class="toggle">
<input type="radio" class="toggle" value="processed" id="switcher-processed" checked="" name="data_type" data-prefix="Data type:" data-tag-value="processed" aria-controls="processed-message" tabindex="0">
<span class="button--alt">Processed</span>
</label>
<label for="switcher-efilings" class="toggle">
<input type="radio" class="toggle" value="efiling" id="switcher-efilings" name="data_type" data-prefix="Data type:" data-tag-value="raw" aria-controls="efiling-message" tabindex="0">
<span class="button--alt">Raw</span>
</label>
</div>
</fieldset>
</div>
<div class="slab slab--inline slab--neutral u-padding--left u-padding--right">
<div class="subcycle-select">
<fieldset class="js-subcycle-select">
<legend class="cycle-select__label">Time period</legend>
<div class="toggles">
<label>
<input type="radio" name="cycle-toggle-cycle-1" value="2012" data-election-full="true" checked="">
<span class="button--alt ">
Full cycle:
2009–2012
</span>
</label>
<label>
<input type="radio" name="cycle-toggle-cycle-1" value="2010" data-election-full="false">
<span class="button--alt ">
2009–2010
</span>
</label>
<label>
<input type="radio" name="cycle-toggle-cycle-1" value="2012" data-election-full="false">
<span class="button--alt ">
2011–2012
</span>
</label>
</div>
</fieldset>
</div>
</div>
<div class="slab slab--inline u-padding--left u-padding--right">
<div class="fc-button-group toggles--buttons">
<button type="button" class="fc-monthTime-button fc-button fc-state-default fc-corner-left button button--list button--alt fc-state-active">List</button>
<button type="button" class="fc-month-button fc-button fc-state-default fc-corner-right button button--grid button--alt">Grid</button>
</div>
<div class="fc-right">
<div class="fc-button-group toggles--buttons">
<button type="button" class="fc-monthTime-button fc-button fc-state-default fc-corner-left button button--list button--alt fc-state-active"><span class="u-visually-hidden">List</button>
<button type="button" class="fc-month-button fc-button fc-state-default fc-corner-right button button--grid button--alt"><span class="u-visually-hidden">Grid</button>
</div>
</div>
</div>
<div id="filters" class="filters is-open" style="border: none; padding: 20px;">
<fieldset class="filter toggles js-filter js-table-switcher" style="border: none;">
<legend class="label t-inline-block">Data type</legend>
<div class="row">
<label for="switcher-processed" class="toggle">
<input type="radio" class="toggle" value="processed" id="switcher-processed" checked="" name="data_type" data-prefix="Data type:" data-tag-value="processed" aria-controls="processed-message" tabindex="0">
<span class="button--alt">Processed</span>
</label>
<label for="switcher-efilings" class="toggle">
<input type="radio" class="toggle" value="efiling" id="switcher-efilings" name="data_type" data-prefix="Data type:" data-tag-value="raw" aria-controls="efiling-message" tabindex="0">
<span class="button--alt">Raw</span>
</label>
</div>
</fieldset>
</div>
<div class="slab slab--inline slab--neutral u-padding--left u-padding--right">
<div class="subcycle-select">
<fieldset class="js-subcycle-select">
<legend class="cycle-select__label">Time period</legend>
<div class="toggles">
<label>
<input type="radio" name="cycle-toggle-cycle-1" value="2012" data-election-full="true" checked="">
<span class="button--alt ">
Full cycle:
2009–2012
</span>
</label>
<label>
<input type="radio" name="cycle-toggle-cycle-1" value="2010" data-election-full="false">
<span class="button--alt ">
2009–2010
</span>
</label>
<label>
<input type="radio" name="cycle-toggle-cycle-1" value="2012" data-election-full="false">
<span class="button--alt ">
2011–2012
</span>
</label>
</div>
</fieldset>
</div>
</div>
<div class="slab slab--inline u-padding--left u-padding--right">
<div class="fc-button-group toggles--buttons">
<button type="button" class="fc-monthTime-button fc-button fc-state-default fc-corner-left button button--list button--alt fc-state-active">List</button>
<button type="button" class="fc-month-button fc-button fc-state-default fc-corner-right button button--grid button--alt">Grid</button>
</div>
<div class="fc-right">
<div class="fc-button-group toggles--buttons">
<button type="button" class="fc-monthTime-button fc-button fc-state-default fc-corner-left button button--list button--alt fc-state-active"><span class="u-visually-hidden">List</button>
<button type="button" class="fc-month-button fc-button fc-state-default fc-corner-right button button--grid button--alt"><span class="u-visually-hidden">Grid</button>
</div>
</div>
</div>
/* No context defined. */