When horizontal space is limited, such as in a filter panel or mobile view, toggle buttons can stack vertically.
<div id="filters" class="filters is-open" style="border: none; padding: 20px;">
<fieldset class="filter toggles toggles--vertical js-filter" style="border: none;">
<legend class="label t-inline-block">Report type</legend>
<label for="notice" class="toggle">
<input type="radio" class="toggle" value="true" id="notice" checked="" name="is_notice" data-tag-value="24- and 48-Hour Reports" tabindex="0">
<span class="button--alt">24- and 48-Hour Reports</span>
</label>
<label for="summary" class="toggle">
<input type="radio" class="toggle" value="false" id="summary" name="is_notice" data-tag-value="Regularly scheduled reports" tabindex="0">
<span class="button--alt">Regularly scheduled reports</span>
</label>
</fieldset>
</div>
<div id="filters" class="filters is-open" style="border: none; padding: 20px;">
<fieldset class="filter toggles toggles--vertical js-filter" style="border: none;">
<legend class="label t-inline-block">Report type</legend>
<label for="notice" class="toggle">
<input type="radio" class="toggle" value="true" id="notice" checked="" name="is_notice" data-tag-value="24- and 48-Hour Reports" tabindex="0">
<span class="button--alt">24- and 48-Hour Reports</span>
</label>
<label for="summary" class="toggle">
<input type="radio" class="toggle" value="false" id="summary" name="is_notice" data-tag-value="Regularly scheduled reports" tabindex="0">
<span class="button--alt">Regularly scheduled reports</span>
</label>
</fieldset>
</div>
/* No context defined. */