When horizontal space is limited, such as in a filter panel or mobile view, toggle buttons can stack vertically.

GitHub issues

<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. */
  • Handle: @vertical
  • Preview:
  • Filesystem Path: components/02-components/filters/04-toggle-button/02-vertical/vertical.html