Binding styling properties

Along with directly displaying data via bindings, you can also bind the values of styling properties. This allows you to create dynamic visual effects based on data or user interactions.

Display example

In the example below, we have a warning in our login form that we only want to display when the terms and conditions checkbox is ticked:

1. Click on the warning element
2. Click the binding icon beside the display property
3. Select the value of the checkbox
4. Click on Preview
5. Now, when the checkbox is clicked, we will see the warning

-->

Background color example

Another example could be binding the background color of an element.

Practically speaking, you will likely need to utilize formulas to achieve the logic you desire in your bindings. For example, conditionally showing two different background colors based on whether a condition is met or not would require the use of an if condition.

FORMULAS

Formulas are a superpower when creating conditions and calculations.

To learn more about formulas, check out the intro to formulas

In the example below, the password input's background color is set to red if the number of characters input is less than 6, and green if it is greater than 6:

1. Select the password input element.
2. Click the binding icon beside the Background color property.
3. In the binding window, open the Formulas tab.
4. Add an if condition that checks whether the number of characters is less than 6.
5. Set the background color to red when the condition is true and green when it is false.
6. Open Preview and type in the field to confirm the color changes.

BINDINGS vs STATES

In the example above, we used an if condition in our binding to conditionally change the background color.

However, we could alternatively have created a state to handle this. States are great when you have many different conditions that you need to cater for, as the formula editor may become difficult to read when working with multiple, very complex formulas.

Here is the same example from above of changing the background color, however, this time utilizing a custom state:

1. Select the password input element.
2. Create a custom state for when fewer than 6 characters have been entered.
3. In that state, set the background color to red.
4. Create another state for when 6 or more characters have been entered.
5. In that state, set the background color to green.
6. Open Preview and type in the field to confirm each state applies correctly.

Learn more about states

Common style properties to bind

Several styling properties are frequently bound to data to create dynamic interfaces:

Property	Description	Use Case
Display	Shows or hides elements	Toggle visibility based on user permissions
Background Color	Changes element background	Highlight valid/invalid form inputs
Border	Modifies border appearance	Emphasize selected items
Width/Height	Adjusts element dimensions	Create progress bars or dynamic layouts
Opacity	Changes transparency	Fade elements based on relevance or state
Transform	Repositions elements	Animate elements based on interactions

Using AI to create style bindings

WEWEB AI

If you are unsure of the basics of using WeWeb AI, check out the intro to WeWeb AI

WeWeb AI makes creating style bindings faster and more intuitive through natural language commands.

Creating conditional style bindings with AI

Instead of manually writing formulas for style bindings, you can describe your desired styling behavior to the AI:

1. Select the element you want to bind the styling property of
2. Switch to AI mode in the left panel (or use Edit with AI on the element)
3. Describe the styling condition you want to create
4. Pass in any relevant data as context

For example, you could ask:

"Change the background color of this password input to green when more than 6 characters have been input, and red when not"

PASSING DATA AS CONTEXT

If you want the AI to use certain pieces of data in the bindings it creates, make sure to pass this data in as context. This will make it much more likely that the AI uses the correct data.

Optimizing complex style bindings with AI

For more complex style bindings that involve multiple styling properties, you can prompt the AI for the desired styling without having the binding menu open – just the desired element selected. This way it will be able to bind multiple styling properties in one go, or create the needed states for the styling:

"When the number of characters in the password input is less than 6, I want it to have a low opacity, red border, and red background. When 6 or more characters are input, I want full opacity, a green border, and green background."

1. Select the element you want to style.
2. Switch to AI mode.
3. Input your prompt.
4. Pass in the relevant data.
5. Submit.
6. Once generated, review the styling the AI created.
7. If the AI created custom states, open them to review each condition.

STATES

In the example above, the AI created states for each condition, and then in each state set the desired styling.

Using states here made sense as it is much more manageable and readable than having the same condition bound to each individual style property.

This way, if we want to change the condition in the future, the condition of the state only needs to be changed and not the conditions of every single bound styling property.

Learn more about states

CONTINUE LEARNING

The final core piece of functionality that bindings can add to your project is the ability to dynamically create elements from lists of data:

Learn about binding the repeating of items →