> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/tutorials/interactions/assignment/clear-fields-on-button-click.md).
# Clear Fields on Button Click
## Overview
Learn how to use [**assignment interactions**](/dynamic-components/component-builder/interactions/assignment.md) to reset input component values to their default state.
***
## Use Cases
We’re building a form with Dynamic Components and want to add a Reset button that clears all current inputs back to a blank state.
***
## Guided Steps
{% stepper %}
{% step %}
#### Build the form layout
Create your form using Dynamic Components and add the required input components, such as text inputs or date inputs
{% endstep %}
{% step %}
#### Add the Reset button
Add a Reset button to the form that users will click to clear all fields.
{% endstep %}
{% step %}
#### Create variables for each input
Create a variable for every input component. These variables will temporarily store the user-entered values.
{% endstep %}
{% step %}
#### Bind variables to input values
For each input component, assign its corresponding variable to the component’s Value attribute. For example, for the First Name input, assign the \`varFirstName\` variable to its Value.
{% endstep %}
{% step %}
#### Capture input values with Assignment interactions
For the first input component, open the [**Interactions tab**](/dynamic-components/component-builder/interactions.md) and create an Assignment interaction. In this interaction, set the variable value to the component’s Value attribute. **Repeat this for each input component in the form**.
{% endstep %}
{% step %}
#### Clear values on Reset button click
Create an Assignment interaction on the Reset button. Use the Reset button as the target, and in the assignments, set each input variable (for example, \`varFirstName\`) to \`empty\` (leave it blank). **Repeat this for all variables linked to your inputs**.
{% endstep %}
{% step %}
#### Confirm fields are cleared
When the Reset button is clicked, all associated variables are reset, clearing the stored values and emptying the input components.
{% endstep %}
{% endstepper %}
***
## Understanding the Logic: How it Works
Here is the "behind-the-scenes" flow of what you just built:
**1. The Variable is the "Source of Truth"**
Think of a Variable as a small storage container. Instead of the Input Component "owning" its own text, we tell it to look at the variable to decide what to display.
* The Logic: "Whatever is inside `varFirstName` is what should appear on the screen."
**2. The Interaction is the "Update"**
When a user types into a field, the Assignment Interaction acts like a bridge. It constantly takes what the user is typing and saves it into that storage container (the variable).
* The Logic: "User typed 'John' → Put 'John' into `varFirstName`."
**3. The Reset is a "Data Wipe"**
The Reset button doesn't actually talk to the Input fields at all. It only talks to the Variables. When you click the button, you are emptying the storage containers.
* The Logic: "Button Clicked → Set `varFirstName` to `empty`."
**4. The "Reaction" (The Magic Part)**
Because the Input field is bound to the variable, it is constantly watching it. As soon as the button clears the variable, the Input field notices the container is empty and immediately disappears its text to match.
#### Summary Diagram
> User Types → Updates Variable → Input Field displays variable value.
>
> Button Clicked → Clears Variable → Input Field reflects the empty variable.
Why do we do it this way? By using variables instead of just "deleting text," you can now use that data elsewhere (like showing a "Welcome \[Name]" message on another page) because the information is stored in a way the whole app can understand, not just the single input box.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.avonnicomponents.com/dynamic-components/tutorials/interactions/assignment/clear-fields-on-button-click.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.
.gif?alt=media)
.gif?alt=media)
.gif?alt=media)
.gif?alt=media)