Checkbox Component
Overview
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.
Properties
Checkbox
| Name | Description | Data Type |
|---|---|---|
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 |
Unchecked Color | Color of the checkbox's perimeter when it is unchecked. | Color |
Layout
| Property | Description | Data Type |
|---|---|---|
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 |
Width | Width of checkbox in pixels | Number |
Resize Mode | Define dimensions of the checkbox component. | Select from list |
Checkbox Blocks
Events Blocks
When Checkbox On Value Change
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.
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.).
Last updated
