# Toggler

Toggler is a visible component that can display checked / unchecked states as a button with a light indicator. By default, it will display a text with ON or OFF labels:

![](https://3777451846-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L93-jOwVwLojc0B0kcn%2F-LHE_rr7cT7ktZddoSXR%2F-LHEdhpyoBHyDVcgoaWP%2Fimage.png?alt=media\&token=1a407841-2fd3-41e1-8fa1-e6f10f9b6452)

Toggler includes a Click event block that will be invoked when user taps on the button

![](https://3777451846-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L93-jOwVwLojc0B0kcn%2F-LHE_rr7cT7ktZddoSXR%2F-LHEb8ARB_uJCuERbhtN%2Fimage.png?alt=media\&token=25b1ba62-003e-4427-bb33-0c151a0c6295)

Toggler also includes a Checked property block. It can be used to determine the state of it and determine if it is Checked or un-Checked. Use if-then-else block in your Toggler.Click block the add custom logic based on its status:

![](https://3777451846-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L93-jOwVwLojc0B0kcn%2F-LHE_rr7cT7ktZddoSXR%2F-LHEbrIZ1cIcRDyCOUNt%2Fimage.png?alt=media\&token=c7ea898a-00af-44fb-bc5e-39aec53f31b8)

This component includes many other blocks to change some properties such as its color or font size. 

![](https://3777451846-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L93-jOwVwLojc0B0kcn%2F-LHE_rr7cT7ktZddoSXR%2F-LHEc7Hzr5WVpk12TLSS%2Fimage.png?alt=media\&token=44c9d70a-a178-42a9-85c7-0d3f310a7a27)

This component also includes blocks that can be used to change the default ON / OFF text. For example, to change ON / OFF to Yes / No, use blocks below

![](https://3777451846-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L93-jOwVwLojc0B0kcn%2F-LHE_rr7cT7ktZddoSXR%2F-LHEc_h9EMpTBE_G31f2%2Fimage.png?alt=media\&token=7a4913b9-45c2-4ce2-b008-eb764b69afc6)

Note: You can also use Switch component, to basically, accomplish same.