Toggles

Toggles are a group of selectable options that are related to each other. The options are contained within a single component and one option is always selected by default. Toggles are available in default and small sizes.

Default toggle

To create a toggle, open a <div> tag with the .toggle class. Inside, wrap a <ul> tag around <li> tags that contain <a>tags. Set the default selected option by adding the .is-active class to one of the <li> tags. Disable options by adding the .is-disabled class to <li> tags.

 
<div class="toggle">
<ul>
<li><a>Toggle 1</a></li>
<li class="is-active"><a>Toggle 2</a></li>
<li><a>Toggle 3</a></li>
<li><a>Toggle 4</a></li>
<li class="is-disabled"><a>Toggle 5</a></li>
</ul>
</div>
 

Users who do not or cannot use pointing devices can tab through links. These links should be in a logical tabbing order, but if they aren't use the tabindex attribute to allow you to define the order.

Small toggle

To create a small toggle, add the .is-small class to a toggle's outer <div> container.

 
<div class="toggle is-small">
<ul>
<li class="is-active"><a>Toggle 1</a></li>
<li><a>Toggle 2</a></li>
</ul>
</div>
 

Inverse toggle

When a toggle is on a darker background apply .is-inverse class to a toggle's outer <div> container.

 
<div class="toggle is-inverse">
<ul>
<li><a>Toggle 1</a></li>
<li class="is-active"><a>Toggle 2</a></li>
<li><a>Toggle 3</a></li>
<li><a>Toggle 4</a></li>
<li class="is-disabled"><a>Toggle 5</a></li>
</ul>
</div>
 

Variables

You can use these variables in a override.css file to customize this component.