Radio Button

Allows the user to choose only one of a predefined set of options.

Ways to use Radio Buttons

Use it with a forms

Add a Radio Button to a form and define the values you want to make available. This allows the user to easily select from a predefined set of options and submit the value.

Provide an input value for several components filters

By binding a radio button’s selected value to multiple components (such as tables, detail or card lists), multiple sets of data can be filtered on a single criteria.

Use its value to pre-fill fields in another component

Sometimes you may want to use the selected value of a radio button component in other components like buttons or forms.

Configuring your Radio Button

To configure your radio button, first give your component a name.

Next, you’ll need to configure the Radio Button options. Enter the display name and the actual value that will be passed through, separated by a comma. If you want a null option to be present, click to checkbox “Allow value to be null”.

Next, set a default value. This step is optional but useful if you want a specific option pre-selected in the UI. Select “Set to null” to make the default selection “Null”. 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.