🩷Stateful input

Create a stateful input component in a form

Create a stateful input component in a form, which sends a boolean value via API request (True or False) depending on whether the user checked it or not.

In this example, we'll create a square checkbox. However, you can create the design you wish, like a radio button, a toggle or any other shape.

To create a stateful input component, you have two options:

Using Figma variants: Create two versions of the component - one for the active ('checked') state and one for the default ('unchecked') state using Figma variants.
Using Bravo tags: Create the active and default components separately in the design file, and add Bravo tags to them.

The tags

To create the component, you need to create two components states: active and default.

[state:default]
[state:active]

These components must be surrounded by a group with the following tag:

[input-state-set:{identifier-name}]

The result will be the same, regardless of the option you choose.

Note that if you're working with Adobe XD, you must use Bravo tags.

🎨 Design file setup

1. Using Bravo Tags

Create the two components for the active and default states ('checked' and 'unchecked').
Apply the tags [state:default]and [state:active] to each component, respectively.

Group the two components, and set the tag [input-state-set:{identifier-name}] to the group. Replace {identifier-name} with a name of your choice. For instance, [input-state-set:checkbox].

Optionally, you can bind remote actions to each of the state elements, as in the stateful component (toggle).

2. Using Figma variants

Draw the element with Figma and create a component.

Once you have the component, add a variant to it.

With both variants in place, design each version according to its intended state. Create one version to represent the 'unchecked' state and the other to depict the 'checked' state.

Important: Each variant must have a property called state. For the 'unchecked' component, ensure that the state property is configured to default.

See here how to add properties to the variants.

For the 'checked' component, it must be set to active.

Add the variants to your design by navigating to the Assets tab in the left menu. Locate the checkbox, now available as a Local Component. Drag it into the design twice, ensuring you have both variants. Then, position them to overlap, and set the state of one to 'active' and the other to 'default'.

Once both components are in place, group them together and set the tag [input-state-set:{identifier-name}], where {identifier-name} is a name of your choosing (e.g., [input-state-set:checkbox]) .
Optionally, you can bind remote actions to each of the state elements, as in the stateful component (toggle).

🔌 Binding remote actions (optional)

Optionally, you can bind a remote action to the stateful input component. This allows to keep track of the component state in the backend, before the user submits the form.

To set up the remote actions and the backend, check out this section of the Stateful Component documentation.

💡 Setting up a initial state (optional)

By default, the state of the stateful input will be default ('unchecked'). In case you want to change this, you can bind a property called Initial State in the Data Binding section, after importing the design file into Bravo.

The data item you bind to it must return one of these two text values: default or active. In case you don't bind this property, the state will be default, so normally you'll want to have active as the data item value.