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

{% hint style="info" %}
This component can be used outside of the menu wrapper or the menu system.
{% endhint %}

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

| Property                  | Description                                                                                            | Accepted Value                  | Required |
| ------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------- | -------- |
| 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.

| Variable                     | Default                                         |
| ---------------------------- | ----------------------------------------------- |
| --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                                    |