Create Component States

Use conditional visibility and some careful component placement to change how a component looks based on different criteria.

Skill Level: Intermediate

Before You Begin

• Know about Screens and Components and Filters and Conditions

• You do not need a paid Adalo plan to use this feature

Walkthrough

In-Depth

Sometimes you may need to create components that have multiple states. For instance, a button that is greyed out until an input is filled in. The way Adalo renders screens makes it very easy to do this. Since Adalo renders the screen from the top down, any missing hidden components are replaced by the components below it. Let's create a simple button that changes states if an input is filled.

1.) Add a simple button to a screen by clicking the big plus sign in the top left

2.) Below it, add another button just like it, but set the button color to a lighter color

3.) Let the bottom border of the first button and the top border of the second button barely touch each other. You can zoom in using Cmd and + (Mac) or Ctrl and + (PC) to make sure the borders are touching.

4.) Now let's add a text input field above the buttons by clicking the big plus sign in the top left, then clicking the Forms and Fields dropdown section.

5.) Let's change the visibility of each button so that the one that appears is different depending on if the input is filled or empty. Click on the darker button, then click on the More button and choose Change Visibility.

6.) Choose Sometimes Visible from the Visibility dropdown.

7.) In the "Will be visible if..." dropdown, choose Other Components > Input

8.) Change the Is equal to dropdown to Is not equal to, then leave the third input of the visibility set to Empty and click Done.

9.) Now click on the second, lighter button and repeat Steps 5-8 for this button as well - only this time set the visibility to Is equal to and leave the third input set to Empty.

Now this button will change colors based on if the input is filled in or not! The key to making this work is that the borders touch each other so they can take each other's placed based on the visibility conditions.

Example

Want to see the app we used to make this walkthrough? Click Here to use or clone the example app. If you don't know how to clone apps, you can learn to do that here.

Learn More

• Always ensure the elements you want to create states with are aligned vertically and horizontally so that they fall into the same location when the visibility conditions change.

• You can make component states out of any component in Adalo.

• You can also make component states with visibility conditions that uses data from your database with Magic Text

• Certain components such as Toggles have their own built-in states.

Help

If you need additional help with this article, you can always ask in our community forum! Be sure to paste the link to this article in your post as well!

Do you have a tutorial or help doc request? Let us know!