Inputs

An input control reads a value and writes that value. Pass it a state. Typing stores the new value on that state, and every other view of the state follows. This page is the control on the screen. The argument line Reactive.Input is on the Functions page.

A text field

Input.Text reads a string and writes a string. The state and the text beside it share one value.

const name = Reactive.State(Text.Plain)("Ada");

Input.Text(name);    // a text input binding to the name
Content.Text(name);  // display the name

Typing in the field sets name. The text reads the same state.

A number field

Input.Number reads a number and writes a number. The field parses what is typed, and the state stays that number.

const count = Reactive.State(Maths.Integer)(0);

Input.Number(count);
Content.Text(count);

The field and the text stay on the stored number.

A button

Button.Set stores a named value on a state. The closure builds the face of the button. Pressing it runs Reactive.Set with that state and that value.

const count = Reactive.State(Maths.Integer)(0);
const next = Maths.Add(count, 1);

Button.Set(count, next, () => {
  Content.Text("+");
});
Content.Text(count);

The button stores next on count.

The value the control receives

The control receives a value it can read and a value it can write. A state is both. A reverse with a source is both as well, and the same control accepts it. The control stays the same. The next page puts that reverse between the state and the field.

Reverse →