How to create an input field with a label in Observablehq

Question

I can create an input text box with this code. What is the best way to add a label to it on the same line, while still binding it to the same global variable?

viewof myText = html`<input type="text" value="initial value">

I would like

viewof myText = html`Enter something: <input type="text" value="initial value">

but myText doesn't bind to the input field.

Answer 1

The simplest way to get this effect is to use Jeremy's Inputs notebook, which includes labeled text boxes. You can import just the textbox method into your notebook, and that fixes the general issue.

Without importing another notebook, the simplest method is this:

viewof myText = {
  let form = html`Enter something: <input type="text" value="initial value">`;
  form.addEventListener('input', e => {
    form.value = e.target.value
  });
  return form;
}

viewof reads the .value property of what's returned to it, and this code sets the .value property to the value of the contained input. When an input element is the only thing in a cell, viewof works without any extra code, but if there are multiple elements that all have values, user code needs to tell the notebook which input provides the value.