# Stateful input
Create a stateful input component in a [form](/bravo-tags/form-and-input-fields/data-biding-send-form-input-to-a-database.md), which sends a boolean value via API request (**True** or **False**) depending on whether the user checked it or not.
{% hint style="info" %}
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.
{% endhint %}
To create a stateful input component, you have two options:
1. **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.
2. **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.
{% hint style="info" %}
Note that if you're working with **Adobe XD**, you must use **Bravo tags.**
{% endhint %}
## 🎨 Design file setup
### 1. Using Bravo **Tags**
1. Create the two components for the active and default states ('checked' and 'unchecked').
2. Apply the tags `[state:default]`and `[state:active]` to each component, respectively.
3. 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]`.
4. Optionally, you can bind [remote actions](/data-binding/data-binding-types/data-binding-add-remote-actions-to-your-ui.md) to each of the state elements, as in the [stateful component (toggle)](/bravo-tags/components/stateful-component-like-button.md).
### 2. Using Figma variants
1. Draw the element with Figma and create a [**component**](https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-Components-in-Figma).
2. Once you have the component, add a [**variant**](https://help.figma.com/hc/en-us/articles/360056440594) to it.
3. 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.
4. **Important:** Each variant must have a property called `state`. For the 'unchecked' component, ensure that the state property is configured to **default.**
{% hint style="info" %}
See [here](https://help.figma.com/hc/en-us/articles/360056440594#Add_properties_and_values) how to add properties to the variants.
{% endhint %}
5. For the 'checked' component, it must be set to **active**.
6. 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'.
{% embed url="" %}
7. 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``]`) .
8. Optionally, you can bind [remote actions](/data-binding/data-binding-types/data-binding-add-remote-actions-to-your-ui.md) to each of the state elements, as in the [stateful component (toggle)](/bravo-tags/components/stateful-component-like-button.md).
## 🔌 Binding remote actions (optional)​
Optionally, you can bind a [remote action](/data-binding/data-binding-types/data-binding-add-remote-actions-to-your-ui.md) 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](https://docs.bravostudio.app/bravo-tags/interactive-component/stateful-component-like-button#binding-the-map-component-to-marker-data) 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**](/data-binding/display-data-in-your-app/data-biding-bind-data-to-ui-for-a-detail-page.md) section, after importing the design file into Bravo.
The data item you bind to it must return any of these options:\
two text values: `default` or `active`, boolean value `true` or `false` or interger `0` or `1`. \
\
In the first case, if you don't bind this property, the state will be `default`, so normally you'll want to have `active` as the data item value.
## 💾 Example files
Example design with **all input fields:**
{% embed url="" %}
Example design showcasing checkboxes (both [**stateful component**](/bravo-tags/components/stateful-component-like-button.md) and [**stateful input component**](#the-tag)):
{% @figma/embed fileId="9Q5AB7q4jHO2qCIoCF5kHt" nodeId="2:3" url="" %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.bravostudio.app/bravo-tags/form-and-input-fields/stateful-input.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.