Components

Checkbox

Allows the user to check a box to pass a specific value.

Ways to use a Checkbox

Use it with a forms

Add a checkbox to a form and allow users to check a box to specify a boolean value.

Provide an input value for several components filters

By binding a checkbox to multiple components (such as tables, detail or card lists), multiple sets of data can be filtered on a single boolean value.

Use its value to pre-fill fields in another component

Sometimes you may want to use the selected boolean value in other components like buttons or forms.

Configuring your Checkbox

To configure your checkbox, first give your component a name and text that appears next to the text box..

Next, set a default value. This step is optional but useful if you want the checkbox to be default checked. Select “Set to value” to choose True or False as the default. Otherwise, choose “Set a template”. A template allows you to enter in a value, insert a variable (i.e. bind to a value in another component in your app), or do a combination of both. 

You can also set visibility rules for your radio button if you want it to appear only if a set of conditions are met.

Design

Left and Top options only appear for top-level components (components that are placed directly onto the Space canvas).

Left: Set the distance of this component from the left edge of the Space canvas (x-axis position). This can be expressed as a % of the canvas or as a number of pixels.

Top: Set the distance of this component from the top edge of the Space canvas (y-axis position). This can be expressed as a % of the canvas or as a number of pixels.

Width: Set the width of this component as a number of pixels or as a % of the containing unit.

Height: Set the height of this component as a number of pixels or as a % of the containing unit.

If the component is a top-level component, the containing unit is the Space canvas.

If the component is in-line within another component, the containing unit is the parent component.

If the component is within a flexbox component, the containing unit is the flexbox.

Snap to Grid: Set the edges of this component to snap to the grid canvas in the Space.