Sprites.Ui.Input

Form controls bound to reactive values.

Sprites.Ui.Input

Sprites.Ui.Input.Checkbox Element

Sprites.Ui.Input.Checkbox(value)

A checkbox bound two-way to a boolean value.

InputTypeDescription
valueSprites.Reactive.ValueThe boolean value, bound two-way.

Returns the input element.

const done = Sprites.Reactive.Value(true);
Sprites.Ui.Input.Checkbox(done);
Sprites.Ui.Dom.Text('done = ', done);
The checkbox drives a boolean.

Sprites.Ui.Input.Dropdown Element

Sprites.Ui.Input.Dropdown(value, build)

A dropdown bound two-way to a value. The build closure adds options with Option, and may use If and Each. The picked option's value is written back on change.

InputTypeDescription
valueSprites.Reactive.ValueThe selected value, bound two-way.
buildFunctionAdds options with Option; may use If and Each.

Returns the select element.

const size = Sprites.Reactive.Value('M');
Sprites.Ui.Input.Dropdown(size, () => {
  Sprites.Ui.Input.Option('S', 'Small');
  Sprites.Ui.Input.Option('M', 'Medium');
  Sprites.Ui.Input.Option('L', 'Large');
});
Sprites.Ui.Dom.Text('size = ', size);
The dropdown writes the picked value back.

Sprites.Ui.Input.Number Element

Sprites.Ui.Input.Number(value, min, max)

A number field bound two-way to a value, with an optional min and max.

InputTypeDescription
valueSprites.Reactive.ValueThe number value, bound two-way.
minNumberOptional minimum.
maxNumberOptional maximum.

Returns the input element.

const age = Sprites.Reactive.Value(8);
Sprites.Ui.Input.Number(age, 0, 120);
Sprites.Ui.Dom.Text('age = ', age);
A number field with a min and max.

Sprites.Ui.Input.Option Element

Sprites.Ui.Input.Option(optionValue, label)

One option of a Dropdown. optionValue is written back when it is picked, keeping its real type; label is the visible text, defaulting to the value.

InputTypeDescription
optionValueAny or Sprites.Reactive.ValueWritten back when picked, keeping its real type.
labelString or Sprites.Reactive.ValueOptional visible text. Defaults to the value.

Returns the option element.

const size = Sprites.Reactive.Value('M');
Sprites.Ui.Input.Dropdown(size, () => {
  Sprites.Ui.Input.Option('S', 'Small');
  Sprites.Ui.Input.Option('M', 'Medium');
});
Sprites.Ui.Dom.Text('size = ', size);
One option, written back when picked.

Sprites.Ui.Input.Slider Element

Sprites.Ui.Input.Slider(value, min, max, step)

A slider bound two-way to a number value, over a range with an optional step.

InputTypeDescription
valueSprites.Reactive.ValueThe number value, bound two-way.
minNumberThe range start.
maxNumberThe range end.
stepNumberOptional step.

Returns the input element.

const level = Sprites.Reactive.Value(40);
Sprites.Ui.Input.Slider(level, 0, 100, 5);
Sprites.Ui.Dom.Text('level = ', level);
A slider over a range with a step.

Sprites.Ui.Input.Text Element

Sprites.Ui.Input.Text(value)

A text field bound two-way to a value.

InputTypeDescription
valueSprites.Reactive.ValueThe text value, bound two-way.

Returns the input element.

const name = Sprites.Reactive.Value('Ada');
Sprites.Ui.Input.Text(name);
Sprites.Ui.Dom.Text('Hello ', name);
The greeting follows the field.