Checkbox is a simple UI widget you can use when you want users to make a binary choice.
Properties allow you to edit the widget, connect it with other widgets and customize the user actions.
These properties allow you to edit the Checkbox widget. All of these properties are present in the property pane of the widget. The following table lists all the widget properties.
|Label||Sets the text shown within the widget.|
|Position||Sets whether the label of the checkbox is aligned to the left or right side of the widget.|
|Alignment||Sets whether the checkbox is aligned to the left or right side of the widget.|
|Default Selected||Sets whether the checkbox begins checked or unchecked by default.|
|Required||Sets whether the checkbox is a mandatory field. When the checkbox is within a Form widget, that Form's submit button will be automatically disabled until the Checkbox is checked.|
|Visible||Controls widget's visibility on the page. When turned off: The widget will not be visible when the app is published. It appears translucent when in Edit mode.|
|Disabled||Makes the widget un-clickable or unusable. The widget will remain visible to the user but user interaction will not be allowed.|
|Height||It configures how a widget’s height reacts to content changes. It has three possible configurations:|
Fixed: The height of the widget remains as set using drag and resize.
Auto Height: The height of the widget reacts to content changes.
Auto Height with limits: Same as Auto height, with a configurable option to set the minimum and maximum number of rows that can be occupied by the widget.
These properties allow you to bind your Checkbox widget with any other widget in queries or JS objects. The following table lists all the binding properties.
|isChecked||Represents whether the checkbox is currently checked (bool).|
|isDisabled||Reflects the state of the widget's Disabled setting (bool).|
|isVisible||Reflects the state of the widget's Visible setting (bool).|
You can define functions that will be called when these events are triggered in the widget.
|onCheckChange||Sets the action to be run when the user checks/unchecks a checkbox. See a list of supported actions.|
Style properties allow you to change the look and feel of the widget.
|Text Color||Represents the widget's Text color setting as a CSS |
|Text Size||Sets the font size of the widget's Label text. Accepts CSS |
|Accent Color||Sets the widget's accent color, which appears as the fill color for the checkbox when checked. Accepts CSS |
|Border Radius||Rounds the corners of the widget's outer edge. With JS enabled, this accepts valid CSS |