Designing Screens - Working with Checkbox
In User Input Screens or any HTML form, a checkbox is a form control that allows users to select or deselect a particular option. It is represented by the <input>
element with the type
attribute set to "checkbox." Checkboxes are used when you want users to make one or more selections from a list of options.
Here are some common use cases for checkboxes within Dynamo Template :
Multiple Choices: When users can choose multiple options from a list. For example, selecting multiple content clauses to populate in the document.
Yes/No: When users want to populate or not a certain content in the document, for example, an image, or merge an attachment or display discount in pricing table.
Insert checkbox to screen
After clicking on Edit Screen or creating a new screen (or form). To add checkbox inside the container,
Put cursor inside the container
Click on
</> Checkbox Group
on the left side barA checkbox group with a checkbox button will appear inside the container.
![image-20240202-113110.png](../__attachments/172097552/image-20240202-113110.png?inst-v=5205e5d1-dc16-46d7-af02-1258d99cc136)
Set up Checkbox
Each of the <checkbox>
element will have its own set of attribute including Name and Label. On checkbox group level, only label, which reflects directly onto the screen, can be set.
For Checkbox Group element:
Select the
Checkbox Group
on the breadcrumbOn the right pane, enter values for
Label
in the Attributes section.Label
is the text that displays above the checkbox buttons, giving more details about the checkbox selection for end users. Label can be left empty if not needed.
More Checkbox elements can be added with
Add Item
also on this group element.
![image-20240202-105415.png](../__attachments/172097552/image-20240202-105415.png?inst-v=5205e5d1-dc16-46d7-af02-1258d99cc136)
For Checkbox element:
Click on each checkbox button and then click on the
Checkbox
element on the breadcrumbOn the right pane, enter values for
Name
,Value
andLabel
in the Attributes section:Name
is the variable that will hold the value when end user selects. For example, when users check this checkbox, the Flow will understand thatcheckbox1=A
. This attribute should not be empty.Value
is the value that the checkbox holds. This attribute can be left empty, then the value will be resolves into Boolean value. For example,checkbox1=true
when this checkbox is checkedLabel
is the display text on screen. This attribute should not be empty.
![image-20240202-110843.png](../__attachments/172097552/image-20240202-110843.png?inst-v=5205e5d1-dc16-46d7-af02-1258d99cc136)
Adding/removing checkbox options:
Adding additional checkbox can be done by: select the Checkbox Group element on the breadcrumb > Click on 'Add item' on the top of the right pane
Removing checkbox can be done by: select the Checkbox element on the breadcrumb > Click on the trash can icon on the top of the right pane.