How do you syncronize a field from Inputs.form in ObservableHQ?

Question

I have a notebook with several grouped forms that are using Inputs.form and I would like to synchronize them (i.e. https://observablehq.com/@observablehq/synchronized-inputs), such as with Inputs.bind(..., viewof x).

For example, with a cell

viewof my_form = Inputs.forms([
  my_field: Inputs.range([0, 100], {step: 1}),
])

I would like to effectively do the following

Inputs.bind(Inputs.range([0, 100], {step: 1}), viewof my_form.my_field)

But of course viewof my_form.my_field is not valid.

Answer 1

An Inputs.form view will return an HtmlElement with multiple children. Using (viewof form).children[i] will return an input HtmlElement that can be used with Inputs.bind.

Here's an example notebook, with the following cells.

viewof form = Inputs.form({
  field: Inputs.range([0, 100], {label: "foo"}),
})

Inputs.bind(Inputs.range([0, 100]), (viewof form).children[0])