There are multiple input components parts of the default Betty Blocks component set. These inputs, such as text input, number input, or checkbox input all have a component option called value. These input values are shared in the state of the page in runtime. This means that at runtime an input writes to that state, and other components (such as a text component) can listen to this piece of state.

There are multiple use cases where this feature can be used. Let’s explain the use by showing one abstract example:

- When a checkbox input is true, I want to show another component

Imagine you have a checkbox input on the left that you want to show or hide an alert component on the right. Because you have the checkbox input added to your page, its value is available to use inside other components.

As a result, in the single rule conditional option, you can now select the value of the checkbox input and compare it with the right-hand side value given. The component is visible when the checkbox input’s value is now equal to true. Else, it is not visible.

Currently, not every input is written to state at the moment. Here you can find a list of support input kinds that do write to state and in which the value can be used inside other components:

All other Input components available in the default Betty Blocks component set, will be supported in the future!

In our component options framework, we have the text and variables option. In this option type, you can make use of the input values. There is a new selection option added (next to data variables and translation keys) that allows you to select any of the available input components from your page. By selecting one of the input components from the list, you are directly referencing its value from the state.