# Elements

## Content



### Off State

When IsOn is False, the toggle displays the OffContent. It is inactive, and the thumb is aligned to the left.

### On State

When IsOn is True, the toggle displays the OnContent and is active, highlighted with accent colors.

| **Themes** | **Off State** | **On State** |
| --- | --- | --- |
| Default |   ![](https://cdn.mescius.io/document-site-files/images/47c7dd3c-b586-44f5-903c-f615f88e343f/images/off.png)   |   ![](https://cdn.mescius.io/document-site-files/images/47c7dd3c-b586-44f5-903c-f615f88e343f/images/on.png)   |
| Microsoft 365 Dark |   ![](https://cdn.mescius.io/document-site-files/images/47c7dd3c-b586-44f5-903c-f615f88e343f/images/blackoff.png)   | ![](https://cdn.mescius.io/document-site-files/images/47c7dd3c-b586-44f5-903c-f615f88e343f/images/blackon.png) |
| Material theme | ![](https://cdn.mescius.io/document-site-files/images/47c7dd3c-b586-44f5-903c-f615f88e343f/images/material.png) |   ![](https://cdn.mescius.io/document-site-files/images/47c7dd3c-b586-44f5-903c-f615f88e343f/images/materialon.png)   |

### Animated Transition

Toggling the switch triggers a smooth animation that helps users understand the state change and improves user experience.

![](https://cdn.mescius.io/document-site-files/images/47c7dd3c-b586-44f5-903c-f615f88e343f/images/toggle.gif)