# Switch Component
## Overview​
The switch component is a two-state toggle that allows users to select between two options. It is commonly used in selecting on/off for things like sound, Bluetooth, WiFi, etc.
## Properties
### Switch
| Property | Value | Description |
| ---------------- | ---------- | -------------------------------------------------- |
| Value | True/False | Initial value of switch |
| Tint Color | Color | Color of background when switch is false |
| On Tint Color | Color | Color of background when switch is true |
| Thumb Tint Color | Color | Color of the switch's slider |
| Disabled | True/False | Toggle whether value switch can be changed by user |
### Layout
| Property | Value | Desciption |
| ----------- | ---------------- | -------------------------------------------------------------------------------------------------------- |
| X | coordinate value | Position of the upper left corner of the switch on the X-axis, where the left side of the screen is X=0. |
| Y | coordinate value | Position of the upper left corner of the switch on the Y-axis, where the top of the screen is Y=0. |
| Height | number in pixels | The switch's height is defined by a custom number of pixels. |
| Width | number in pixels | The switch's width is defined by a custom number of pixels. |
| Resize Mode | Stretch | Stretches the switch to fit the dimensions of the device's screen. |
| Resize Mode | Float in Place | Renders the switch in the same aspect ratio as the design, regardless of the device size. |
## Switch Blocks
To access the blocks specific to the switch component:
1. On the Design tab, add a **Switch** component to a screen.
2. Navigate to the **Blocks** tab.
3. In the component tree on the left, click the name of the switch component.
4. A drawer of switch-specific blocks opens.
### Event Blocks
#### When Switch On Value Change
This event fires every time the switch is clicked.
**Outputs**
* **newValue** - returns the new value of the switch (true or false) each time the switch is clicked.
### Properties Blocks
There are two types of property blocks: dark green "set" and light green "get" blocks. The specific blocks available vary according to the UI component.
The dark green set blocks allow you to change the component's properties using blocks. For example, if you don't want a group component to be enabled for a user until they've typed a set number of characters into a text input component, you can use the group's dark green set group's disabled status block.
The light green get blocks allow you to access the properties of a component (e.g. color, font, width, text, etc.).
.png?alt=media&token=466ec7e8-3ab9-414b-9ac2-bbcb2a2d52ff)