📐
Thunkable Docs
Build an AppDrag and Drop DocsSnap to Place Docs
Snap to Place
Snap to Place
  • 👋Welcome to Thunkable Docs
  • 👶Getting Started
    • Signing In
    • Your Thunkable Projects Page
    • Tutorials
    • Live Test your App
  • 🆕Create New Project
    • Project Settings
    • Project Assets and Sizes
  • Thunkable Sample Projects
  • Public Gallery of Projects
  • 🛠️ Components
  • 🔘User Interface
  • Button
  • Label
  • Text Input
  • List Viewer
  • Web Viewer
  • Switch
  • Slider
  • Alert
  • Loading Icon
  • Date Input
  • Time Input
  • PDF Reader
  • Rating
  • 📊Data Viewers
  • Data Viewer List
  • Data Viewer Grid
  • Custom Data Viewer Layout
  • Data Sources
  • 📐Layout
  • Top Tab Navigator
  • Bottom Tab Navigator
  • Stack Navigator
  • Drawer Navigator
  • Screen
  • Row
  • Column
  • 📷 Image
  • Image
  • Photo Library
  • Camera
  • Barcode Scanner
  • Image Recognizer
  • Animation by Lottie
  • Video
  • Video Recorder
  • 🗄️ Data
  • Local Storage
  • Local DB
  • Realtime DB by Firebase
  • Airtable
  • Media DB by Cloudinary
  • File Picker
  • Web API
  • 🌍Location
  • Maps by Google and Apple
  • Location Sensor
  • 💲Monetization
  • Ads by AdMob
  • In-App Purchase
  • 🌐Sensors
  • Gyroscope
  • Magnetometer
  • Accelerometer
  • Timer
  • Bluetooth Low Energy
  • 🔊Voice
  • Sound
  • Text to Speech
  • Speech Recognizer
  • Translator
  • Audio Recorder
  • 🤝Social
  • Share
  • Email Sign In by Firebase
  • Push Notifications by One Signal
  • 🎮Gaming
  • Canvas
  • Sprites
  • Sprite Gallery
  • Canvas Label
  • 🤖Gaming Blocks🎮
  • Events
  • Motion
  • Looks
  • Direction
  • Sensing
  • Add & Remove
  • Stage
  • Canvas Label
  • 🤖Blocks
  • Control
  • Logic
  • Math
  • Text
  • Lists
  • Color
  • Objects
  • Device
  • Variables
  • Functions
  • "Any Component" Blocks
  • 🖥️ App Services & Emulators
  • 🔒App Data Privacy
  • ➕Make Copy
  • 📥Download
  • 📤Share
  • 📱Publish
  • Publish to App Store (iOS)
    • TestFlight Overview
      • TestFlight in Depth
  • Publish to Play Store (Android) with AAB
  • Publish as a Web App
  • Generate Screenshots
  • 🔎Troubleshooting
    • Login Issues
    • FAQs
  • 📏Intro to Spacing
  • 🖼️ Intro to Sizing
  • 🔤Fonts
  • 💾Managing Storage
  • 📝Bugs and Product Feedback
  • Snap to Place Hour of Code Videos
Powered by GitBook
On this page
  • Switch Overview
  • Getting Started
  • Style the Switch
  • Events
  • On Value Change
  • Properties
  • Disabled
  • Height
  • On Tint Color
  • Thumb Tint Color
  • Tint Color
  • Value
  • Visible
  • Width
  • X
  • Y

Was this helpful?

Export as PDF

Switch

Think of a Light Switch. It has two settings, On and Off. That is exactly what the switch component is like.

PreviousWeb ViewerNextSlider

Last updated 2 years ago

Was this helpful?

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.

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.

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.

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

This event fires every time the switch is clicked.

Properties

Disabled

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

  • True

  • False

Height

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

On Tint Color

Change the "active" color of the switch.

Thumb Tint Color

Change the color of the switch

Tint Color

Change the "inactive" color of the switch

Value

Change the state (on or off) of the switch

Visible

Show or hide the switch on the screen.

Width

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

X

Y