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.
To access the blocks specific to the switch component:
On the Design tab, add a Switch component to a screen.
Navigate to the Blocks tab.
In the component tree on the left, click the name of the switch component.
A drawer of switch-specific blocks opens.
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.
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.).
Color
Color of the switch's slider
Disabled
True/False
Toggle whether value switch can be changed by user
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.
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
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.
Thumb Tint Color
Width
The checkbox component allows users to select one or more options from a set. They're like little digital checkboxes you see when you want to choose multiple options simultaneously, such as selecting items in a to-do list or filtering search results. These components play a pivotal role in enhancing user experience by providing a clear and intuitive way for users to select various options. They offer visual feedback, showing users what's currently selected and what's not, which is crucial for clarity and ease of use within an app.
This event fires every time the checkbox component is clicked.
Outputs
newValue - returns the new value of the checkbox (true or false) each time the checkbox is clicked.
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.).
Color of the checkbox's perimeter when it is unchecked.
Color
Width of checkbox in pixels
Number
Resize Mode
Define dimensions of the checkbox component.
Select from list [Stretch, Float in Place]
Value
True - checked False - unchecked
True/False
Disabled
Toggle whether the value of the checkbox can be changed by user.
True/False
Color
Background color of the checkbox when it is checked.
Color
X
Location of top left corner of checkbox on X-axis, where the left hand side is X=0
Number
Y
Location of top left corner of checkbox on Y-axis, where the top side is Y=0
Number
Height
Height of checkbox in pixels
Number
Unchecked Color
Width
The date input component allows users to easily select dates. It's like a digital calendar where users can pick dates for appointments, deadlines, or any time-related tasks within an app. These components are essential because they simplify entering dates, reducing errors and ensuring accuracy. The date input component utilizes the native Android and iOS date pickers.
You can trigger actions to happen when an event occurs.
This event fires when the user has selected a date using the date picker.
Returns the date from the date picker in the format Mon., DD, YYYY.
Returns the date from the date picker in numeric form. For example, if the user selects February 17, 2024, this block returns 17. If they select 5 March 2025, this block returns 5.
Returns the month from the date picker in numeric form. For example, if the user selects February 17, 2024, this block returns 2. If they select 5 March 2025, this block returns 3.
Returns the year from the date picker in YYYY form.
Opens the date picker to prompt the user to enter a date.
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.).
The time input component allows users to easily select times. Users can pick times for appointments, deadlines, or any time-related tasks within an app. These components are essential because they simplify entering times, reducing errors and ensuring accuracy. The time input component utilizes the native Android and iOS time pickers.
Make the date's text bold
True/False
Color
Color of font when displaying date
Color
Width of date input in pixels
Number
Resize Mode
Define dimensions of the date input component.
Select from list [Stretch, Float in Place]
Width of border around date input in pixels
Number
Border Radius
Radius of corners of border on date input in degrees
Number
Shadow Color
Color of date input's shadow
Color
Shadow Opacity
Opacity of date input's shadow
Number between 0 and 100
Shadow Radius
Radius of corners of date input's shadow in pixels
Number
Shadow Offset
How far date input's shadow should be offset, in height and width, in pixels
Number
Style
Format to use when displaying selected date
Select from menu [YYYY-MM-DD, MM/DD/YYYY, M/D/YY, Month Day, Year, Mth. Day, Year]
Font Size
Size of font when displaying date
Number
Font Style
Make the date's text italicized
True/False
X
Location of top left corner of date input on X-axis, where the left hand side is X=0
Number
Y
Location of top left corner of date input on Y-axis, where the top side is Y=0
Number
Height
Height of date input in pixels
Number
Visible
Toggle whether your end users can see the date input
True/False
Border Style
Set whether border style is solid, dotted or dashed (only visible if border width > 0)
Select from list [solid, dotted, dashed]
Border Color
Color of border (only visible if border width > 0)
Color
Font Weight
Width
Border Width
Style
Format to use when displaying selected time
Select from menu [Hour:Minute AM/PM, Hour:Minute 24h]
Font Size
Size of font when displaying time
Number
Font Style
Select whether font is italic
True/False
X
Location of top left corner of time input on X-axis, where the left hand side is X=0
Number
Y
Location of top left corner of time input on Y-axis, where the top side is Y=0
Number
Height
Height of time input in pixels
Number
Visible
Toggle whether your end users can see the time input component
True/False
Border Style
Set whether border style is solid, dotted or dashed (only visible if border width > 0)
Select from list [solid, dotted, dashed]
Border Color
Color of border (only visible if border width > 0)
Color
You can trigger actions to happen when an event occurs.
This event fires when the user has selected a time using the time picker.
Opens the time picker to prompt the user to enter a time.
Returns the hour from the time picker in 24-hour format. For example, if the user selects 2:30 PM, this block returns 14.
Returns the minutes from the time picker in. For example, if the user selects 2:30 PM, this block returns 30.
Returns the selected time from the time picker in the same format as the time input's style property. For example, if the user selects 2:30 PM, and the style is set to Hour:Minute AM/PM, this block returns 2:30 PM. If the user selects 2:30 PM, and the style is set to Hour:Minute 24h, this block returns 14:30.
The time the user selects automatically displays in the time input label, but if you want to save the time to be used later, you can use the block combination below to save the time as a variable.
Get Time
Time in whichever format you specify
Get Hours
Hour of the Day from 1-24
Get Minutes
Minutes from 1-60
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 button to be enabled for a user until they've typed a set number of characters into a text input component, you can use the button's dark green set button'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.).
Font Weight
Select whether font is bold
True/False
Color
Color of font when displaying time
Color
Width
Width of time input in pixels
Number
Resize Mode
Define dimensions of the time input component.
Select from list [Stretch, Float in Place]
Border Width
Width of border around time input in pixels
Number
Border Radius
Radius of corners of border on time input in degrees
Number
Shadow Color
Color of time input's shadow
Color
Shadow Opacity
Opacity of Time Input's shadow
Number between 0 and 100
Shadow Radius
Radius of corners of time input's shadow in pixels
Number
Shadow Offset
How far time input's shadow should be offset, in height and width, in pixels
Number
The slider component is a horizontal track with a control, called a thumb, that app users can adjust between a minimum and maximum value. As a slider’s value changes, the portion of track between the minimum value and the thumb fills with color.
To access the blocks specific to the slider component:
On the Design tab, add a Slider component to a screen.
Navigate to the Blocks tab.
In the component tree on the left, click the name of the slider component.
A drawer of slider-specific blocks opens.
Number
Maximum value the user can select. Must be greater than Minimum Value.
Min Track
Color
Color of slider track between minimum value and current value
Max Track
Color
Color of slider track between current value and maximum value
Thumb Color
Color
Color of the slider thumb widget
Disabled
True/False
A disabled component is temporarily inactive and cannot be interacted with by the user.
number in pixels
The slider's width is defined by a custom number of pixels.
Resize Mode
Stretch
Stretches the slider to fit the dimensions of the device's screen.
Resize Mode
Float in Place
Renders the slider in the same aspect ratio as the design, regardless of the device size.
number in pixels
The width of the slider's border is defined by a custom number of pixels.
Border: Radius
number in pixels
The radius of the slider border’s corners is defined by a custom number of pixels.
Shadow: Color
color
The slider's shadow is the color selected.
Shadow: Opacity
number between 0 and 100
The opacity of the slider's shadow.
Shadow: Radius
number in pixels
The radius of the slider shadow’s corners is defined by a custom number of pixels.
Shadow: Offset
number in pixels
How far the slider's shadow should be offset, in height and width, is defined by a custom number of pixels.
Get the slider's maximum value.
Set the slider's initial value.
Get the slider's initial value.
Set the slider's step value.
Get the slider's step value.
Set the slider component's height.
Get the slider component's height.
Returns the height of the slider component in pixels after it has been rendered on-screen.
Set the slider component's width.
Get the slider component's width.
Returns the width of the slider component in pixels after it has been rendered on-screen
Set whether the slider component is visible on the screen.
Get whether the slider component is visible on the screen.
Set the position of the upper left corner of the slider on the X-axis, where the left side of the screen is X=0.
Get the position of the upper left corner of the slider on the X-axis, where the left side of the screen is X=0.
Set the position of the upper left corner of the slider on the Y-axis, where the top of the screen is Y=0.
Get the position of the upper left corner of the slider on the Y-axis, where the top of the screen is Y=0.
Set the slider's minimum track tint color i.e. the color of the track the slider when set to its lowest value.
Get the slider's minimum track tint color
Set the slider's minimum track tint color i.e. the color of the track the slider when set to its highest value.
Get the slider's maximum track tint color
Set the slider's disabled value (true/false).
Get the slider's disabled value (true/false).
Set the slider's thumb tint color i.e. the color of the thumb at any given position.
Get the slider's thumb tint color.
Value
Number
Initial value of the slider
Step
Number
Step between values on the slider
Minimum Value Range
Number
Minimum value the user can select. Must be less than Maximum Value.
X
coordinate value
Position of the upper left corner of the slider 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 slider on the Y-axis, where the top of the screen is Y=0.
Height
number in pixels
The slider's height is defined by a custom number of pixels.
Visible
visible
Users can see the slider.
Visible
invisible
Users cannot see the slider.
Border: Color
color
The slider's border is the color selected.
This event fires as the value of the slider changes. Returns the current value of the slider.
This event fires when the user lifts their finger or thumb off the slider. Returns the current value of the slider.
Set the slider's minimum value.
Get the slider's minimum value.
Set the slider's maximum value.
Maximum Value Range
Width
Border: Width
