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.

Variable Name CSS Property
--toggle-corner-radius border-radius
--toggle-bg-color background
--toggle-text-color color
--toggle-text-hover-color color
--toggle-text-size 1.4rem
--toggle-padding padding
--toggle-height height
--toggle-active-text-color color
--toggle-active-bg-color background
--toggle-active-corner-radius border-radius
--toggle-active-border-width 2px
--toggle-active-border-color border-color
--toggle-disabled-text-color color
--toggle-small-padding padding
--toggle-small-height height
--toggle-inverse-text-color color
--toggle-inverse-bg-color background
--toggle-inverse-active-text-color color
--toggle-inverse-active-bg-color background