Skip to content

Checkbox element

As the name indicates, the <checkbox> element renders a checkbox in BML content. This can be used to give listview items a checkbox, enabling users to check or uncheck items as needed. This functionality is useful for creating lists where selection and multi-selection actions are desired, such as in to-do lists, settings options, and forms.

Attributes

The checkbox element has the following attributes, all optional:

Attribute Name Required Type Description
x No Number Specifies the X-axis position of the checkbox.
y No Number Specifies the Y-axis position of the checkbox.
size No Number Sets both the width and height of the checkbox to the same value, in pixels. Useful for making the checkbox larger, e.g. to reduce misclicks on small screens in a listview.

Note: the checkbox is always rendered as a square, so there are no separate width/height attributes — use size to control its dimensions, consistent with the <icon> element.

Examples

Checkbox with position:

This code snippet places a checkbox at the coordinates (10, 20) within a BML container:

<bml>
  <checkbox x="10" y="20"/>
</bml>

Result

Larger checkbox

This code snippet renders a checkbox at twice the default size, useful for listview items on mobile where a small checkbox is easy to misclick:

<bml>
  <checkbox size="40"/>
</bml>