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.
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.