Checkbox Widgets
In a user input form, a checkbox gives the user a binary choice. A checkbox can be used for a single choice, like whether or not to subscribe to a newsletter, or in a situation where the user can select several of many possible choices, like choosing from many pizza toppings in an order form.
The checkbox widget is located in the Forms section of the Default widget library.
Box Size and Alignment
In the Button section of the Style pane, you can use the Size field to set the width and height of the box portion of the checkbox.
By default, the box portion of a checkbox is on the left, and the label text is on the right. To swap the order so that the text is on the left and the box is on the right, use the Align icons to the right of the Size field.
Tip
Align the box to the right when prototyping forms in right-to-left languages, such as Arabic or Hebrew.
Editing the Label Text
You can edit the text on a checkbox widget's label via any of the options below:
- Double-click the checkbox label to enter text-editing mode
- Select the checkbox label and press ENTER to enter text-editing mode
- Right-click the checkbox label and select Edit Text in the context menu
- Select the checkbox label and begin typing. (This option is only available if you have disabled the single-key shortcuts)
Special Properties
Checked by Default
By default, a checkbox begins in its unchecked state when the page first loads in the web browser.
To instead have a checkbox begin in its checked state, select the checkbox and click its box on the canvas.
You can also check the Selected option in the Interactions pane.
Disabled
Disabling a checkbox prevents users from interacting with it in the web browser. This also activates the widget's Disabled style effect, making it appear greyed-out.
There are two ways to disable a widget:
Check the Disabled checkbox at the bottom of the Interactions pane.
Disable the widget dynamically in the web browser with the Enable/Disable action. You can do this as part of any interaction, such as when the page loads or when a button is clicked.
Tip
You can dynamically enable a disabled widget in the web browser with the Enable/Disable action. Check out the Terms and Conditions tutorial for an example of how this can be done.
Special Interactions
Checking and Unchecking a Checkbox
In the web browser, you can click a checkbox to check and uncheck it.
You can also dynamically check and uncheck a checkbox with the Set Selected/Checked action. The true value option will check the checkbox, and the false option will uncheck it. The toggle option will set the checkbox to the opposite of the state it's in when the interaction occurs.
Capturing and Evaluating the Checked State
You can determine whether or not a checkbox is checked via the is selected of value option in interactions and conditions. The value "true" is returned if the checkbox is checked, and "false" is returned if the checkbox is not checked.
Submit Button
Pressing the ENTER key while a checkbox has focus in the web browser can fire the Click or Tap event of another widget on the page, known as the checkbox's "submit button."
To assign a submit button to a checkbox:
Select the checkbox and click Show All in the lower section of the Interactions pane.
Choose from a list of eligible widgets in the Submit Button dropdown.
To unassign the submit button, click Unassign Submit Button at the bottom of the dropdown.
Limitations and Workarounds
Indeterminate State
In some design patterns, checkboxes have a third, "indeterminate" state in which they are neither checked nor unchecked. If you need a checkbox that can have three states, you can make a custom checkbox using shape widgets and a dynamic panel.
Tab Order
Tab order for checkboxes and other form widgets is determined by their layer depth, as shown in the Outline pane. You can learn more about this and how to change a widget's tab order in the Organizing Widgets article.