Stateful input (checkbox)
Create a stateful input component (checkbox) 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.
To create the component, you need to create two components: active and default. If you're using Figma, you can also create variants. See more in the next section.
[state:default]
[state:active]
These components must be surrounded by a group with the following tag:
[input-state-set:{identifier-name}]
Replace
{identifier-name} with a name of your choice. For instance, [input-state-set:checkbox].To create a stateful input component, you can:
- Use Figma variants to create two versions of the component: active (checked) and default (unchecked).
- Create the active and default components separately in the design file, and add Bravo tags to them.
The result will be the same, regardless of the option you choose. If you're using Adobe XD, you must implement it with Bravo tags.
In this example, we'll create a square checkbox. However, you can create the design you wish, like a radio button or any other shape.
3. Now, you'll have two variants of the same component. Create the design you want for each of them. One of them should be the "unchecked" one, and the other one, the "checked" one.
4. Each variant must have a property called state. See here how to add properties to the variants. For the unchecked component, the state property must be set to default.
5. For the checked component, it must be set to active.
6. Now, you can add the variants to the design. To do that, go to the Assets tab in the left menu. You should see the checkbox as a Local Component. Drag it into the design twice, as both variants are needed. Then, make sure they overlap, and set the state of one of them to active, and the other one to default.
7. Once both components are in place, group them and set the tag
[input-state-set:{identifier-name}], replacing {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).
8. As the component must be within a form, make sure it is inside a container that also has a submit action.
1. Create the two components for the active and default states ("checked" and "unchecked"). Add the tags [state:default] and [state:active] to them, respectively.
2. 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).
3. As the checkbox must be inside a form, make sure it is inside a container that also has a submit action.
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.
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.
Row in the backend containing the initial state for the stateful input.
Example design with all input fields:
Last modified 1yr ago