observablehq: is it possible to have inputs with custom html?

I would like to have multiple inputs, such as Inputs.select, collapsed into an accordion menu in an observablehq notebook. I managed to create an accordion menu using custom html (js/css/html), but I am struggling to add the inputs in the accordion menu. Here is an observablehq notebook with the accordion menu. I would like to have the inputs as part of Section 1/Section 2.

Yup! I have examples in this notebook.

You can use Inputs.form to combine several inputs in one cell—

viewof form = Inputs.form({
  option1: Inputs.checkbox(["A", "B"], {label: "Select some"}),
  option2: Inputs.range([0, 100], {label: "Amount", step: 1}),
  option3: Inputs.radio(["A", "B"], {label: "Select one"}),
  option4: Inputs.select(["A", "B"], {label: "Select one"})
})

And you can nest Inputs.form, and pass it a template option, to put the inputs in different accordion sections:

viewof nestedForm = Inputs.form([
  Inputs.form({
    a: Inputs.range([0, 100], { label: "Amount", step: 1 }),
    b: Inputs.select(["A", "B"], { label: "Select one" })
  }),
  Inputs.form({
    a: Inputs.range([0, 100], { label: "Number", step: 1 }),
    b: Inputs.checkbox(["C", "D", "E"], { label: "Select any" })
  })
], {template: inputs => htl.html`<div>
  <details><summary>Section 1</summary>${inputs[0]}</details>
  <details><summary>Section 2</summary>${inputs[1]}</details>
</div>`})