# Switch

## Switch Overview

A switch is a component that has two settings, true and false. You can get your app to do specific tasks only if the switch is set to true. 

![](/files/-LAn68KdTsbXiRGsjXH9)

## Getting Started

Each time the switch is clicked the value will change. The value returned will only ever be `true` or `false`. To test this for yourself you can use the following blocks.

![](/files/-MWiX9j8t3LVznuX3mHm)

In the following example, the user can only advance to `Screen2` if the acknowledge they have accepted the terms and conditions by clicking on the switch.

![](/files/-MWiXQwteEJ16aJq86ov)

| Event           | Description                                                                                                  |
| --------------- | ------------------------------------------------------------------------------------------------------------ |
| On Value Change | By default, the switch `newValue` will be set to `false`. If turned on, the `newValue` will be set to `true` |
| Value           | If on, value is set to `true`; if off, `false`                                                               |
| Disabled        | If set to `true`, switch will be disabled                                                                    |

## Style the Switch

You can customize the switch with the following properties:

* **Tint Color:** Color of the switch track when switch is set to off
* **On Tint Color:** Color of the switch track when switch set to on 
* **Thumb Tint Color:** Color of the switch thumb

## Events 

### On Value Change

![](/files/-MWiXu-th3Ep7LerkKjl)

This event fires every time the switch is clicked.

## Properties

### Disabled 

![](/files/-MWZG3NqO-Qepj7sp5hj)

The disabled property is used to set whether or not the button is "clickable". Expected values for this property are:

* True
* False

### Height 

![](/files/-MWZG4gitjHowTsf_j_L)

The set and get height blocks work with the Height property of the switch component.

### On Tint Color 

![](/files/-MWZG6DZJ4tRxXoh61Dy)

Change the "active" color of the switch.

### Thumb Tint Color 

![](/files/-MWZG7d5VsHWrnTT99VE)

Change the color of the switch

### Tint Color 

![](/files/-MWZGEHN_gpbrhgSKHxM)

Change the "inactive" color of the switch

### Value 

![](/files/-MWZGFgk_NS1U31Z65lg)

Change the state (on or off) of the switch

### Visible 

![](/files/-MWZGGpog3cyq9npq5Qo)

Show or hide the switch on the screen.

### Width 

![](/files/-MWZGI49tqFn8CnxjOQa)

The set and get height blocks work with the Width property of the switch component.

### X 

![](/files/-MWZGJHPWiFk0A6jxttz)

### Y

![](/files/-MWZGKPvI15ZDZMgD4dU)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.thunkable.com/snap-to-place/switch.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.