How to use the @cycle/dom.input function in @cycle/dom

div(".form-element", [
          label({htmlFor: "email"}, "Email:"),
          br(),
          input("#email", {type: "text", value: formatString(user.email), readOnly: true}),
          p(errors.email),
        ]),
        div(".form-element", [
          label({htmlFor: "points"}, "Points:"),
          br(),
          input("#points", {type: "text", value: formatInteger(form.points), autocomplete: "off"}),
          p(errors.points),
        ]),
        div(".form-element", [
          label({htmlFor: "bonus"}, "Bonus:"),
          br(),
          input("#bonus", {type: "text", value: formatInteger(form.bonus), autocomplete: "off"}),
          p(errors.bonus),
        ]),
        button("#submit.form-element", {type: "submit", disabled: !model}, "Edit"),
      ])
    }
  )

.map(([props, value]) =>
      div('.labeled-slider', [
        span('.label', [ props.label + ' ' + value + props.unit ]),
        input('.slider', {
          attrs: {type: 'range', min: props.min, max: props.max, value: value}
        }),
      ]),
    );

function vInput() {
  return div('#input', [
    label('.playerLabel', 'New Player:'),
    input('.name', {
      props: {type: 'text', autofocus: true},
      hook: {
        update: (oldvNode, {elm}) => elm.value = ''
      }
    })
  ]);
}

DOM: O.merge(intents.reset$, intents.create$, O.just()).map(() =>
      header(".header", [
        h1("todos"),
        input(".new-todo", {
          type: "text",
          value: "",
          attributes: {placeholder: "What needs to be done?"},
          autofocus: true,
          name: "newTodo"
        })
      ]))
  }

DOM: xs.combine(result$, number$, calculating$).map(([result, number, calculating]) =>
      div('.example', [
        input('.number', { attrs: { type: 'range', min: 1, max: 40, value: 1 } }),

        div('.result', [
          `Fibonacci number ${number}: ${calculating ? 'Calculating...' : result}`
        ])
      ])
    ),

const render = ({table, formula, tree}) => div([
  h1('.modal-box-title', 'Export...'),
  h3('ASCII Table'),
  div([
    textarea('.export-text', {
      attributes: {readonly: true},
    }, table ? table.toString() : ''),
  ]),
  h3('Formula'),
  div([
    input('.export-text-single', {
      attributes: {readonly: true},
      value: formula,
    }),
  ]),
  h3('LaTeX Forest Tree'),
  div([
    input('.export-text-single', {
      attributes: {readonly: true},
      value: tree,
    }),
  ]),
])
;

function renderHexInputElement (color) {
  return input('.hex-input', {props: {type: 'text', value: color}});
}

function renderHexInputElement (color) {
  return input('.hex-input', {props: {type: 'text', value: color}});
}