# Toggle

The **Toggle** **Object** is a **2D GUI Object** that has two states: checked or unchecked. Its initial state and colors can be customized in the [**Attributes**](#attributes).

![Toggle.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-d18ed683927f5da5a134bbd03add6d93d9f42ec7%2Ftoggleimage120232.png?alt=media)

![Toggle example.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-32da3a675bb4cbe0604173fa8a5223ffe44008a1%2Ftoggle-example.gif?alt=media)

## Attributes

The **Object's** **Attributes** can be used to fully customize the **Object**. Explained below, they are:

* [**Transformation**](#transformation)
* [**Toggle**](#toggle)
* [**Style**](#style)
* [**Tag**](#tag)

### Transformation

![Transformation Attributes.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-de9498c53ba90a28a0fb67a48c09191ee28730af%2Ftoggleattstransformation.png?alt=media)

The `Transformation` **Attributes** deal with placement, rotation, and size in *XY* space. More information can be found [here](https://docs.incari.com/incari-studio/2024.1/objects-and-types/attributes/common-attributes/transformation).

### Toggle

![Toggle Attributes.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-cacf2045736e8dfa5bd6ab3794ac5b64544e074d%2Ftoggletoggleatts20232.png?alt=media)

The `Toggle` **Attributes** provide crucial data for a **Toggle Object**.

* `Is checked` can be enabled or disabled. Enabled toggles it on and disabled toggles it off.

### Style

![Style Attributes.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-e05311a554315dd8cf2ad4398ddaee6ad4818131%2Ftogglestyleatts20232.png?alt=media)

The **Style Attributes** offer the user options to customize further visual aspects of the **Toggle**:

* `Handle Color` is the color of the **Toggle's** handle. It is the small circle which appears on the background of the **Toggle**.
* `Checked Color` is the color of the background when `Is checked` is enabled.
* `Unchecked Color` is the color of the background when `Is checked` is disabled.
* `CSS Classes` contain the *CSS* class names of the **Object**.
* `Stylesheet` contains the *CSS* stylesheet of the **Object**. This can override any stylesheet provided in the [**Project Settings**](https://docs.incari.com/incari-studio/2024.1/modules/project-settings/style) or a [**Scene2D**](https://docs.incari.com/incari-studio/2024.1/objects-and-types/project-objects/scene2d). To address these in the **Logic**, please refer to the [**Object 2D Nodes**](https://docs.incari.com/incari-studio/2024.1/toolbox/incari/object2d).

### Tag

![Tag Attributes.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-dc4f375e34ce9bdd2bebc3e93ff34c8680ab55bb%2Fbuttonattstag.png?alt=media)

This **Attribute** manages the *tags* for the **Toggle**. See more on *tags* [here.](https://docs.incari.com/incari-studio/2024.1/objects-and-types/attributes/common-attributes/tag)