Toggle (Component)
The Toggle Component provides a flexible way to manage UI toggles (buttons that enable/disable a target element with ). It supports multiple buttons targeting the same element, focus management, scroll freezing, accessibility features, and a global JavaScript API.
This component can be used outside of the menu wrapper or the menu system.
Core Behaviors
1. Toggling Class
Toggles the class of any element based on its ID. Gives you the ability to toggle an off canvas or modal.
2. Accessibility
The toggle handles accessibility for you by controlling tab focus into the new element that you are toggling and moving focus to the next focus element ID you give it or keeps focus on itself
Component Properties
Toggles have a set of component properties that allow you to control each instance.
Custom ID For This Toggle
Sets the ID for that current toggle element
CSS ID String without the '#'
Yes
Aria Label
Sets the aria label for the toggle element. Recommend language like "Toggle Menu"
Text
Yes
Target Element ID
The CSS ID of the element you wish to target with the toggle
CSS ID String without the '#'
Yes
Toggled Class
The class that will be toggled on the Target Element
CSS Class without the '.'
Yes
Target is a Modal?
Adds role="dialog" and aria-modal="true" to the target for accessibility.
Toggle
No
Next Focus Item ID
ID of element to focus to once toggled. Leave empty to leave it to self
CSS ID String without the '#'
No
Label Type
When set to single label it will be one label that displace. Alternate will switch label when toggled.
Select: None, Single, Alternate
Yes
First Label
Label text when toggle is inactive (for alternate mode) or constant label (for single label mode)
Text
No
Second Label
Label text when toggle is active (for alternate mode).
Text
No
Icon Type
Change the icon type to be used
Select
Yes
Custom SVG Icon
If Icon Type is set to Custom SVG this will set the icon
SVG
No
Freeze Body Scroll
If true, locks the body scroll when toggled.
Toggle
No
Available CSS Variables
There are a few CSS variables to control the core styling of the toggle externally without the need to override specificity.
--toggle-transition-duration
--ease-smooth: cubic-bezier(0.25, 0.8, 0.3, 1);
--toggle-icon-gap
0.25em
--toggle-icon-size
1.25em
--toggle-icon-line-width
8px
--toggle-icon-color
currentColor
Last updated