31:[] 2f:{"title":"Use Inputs.form with a template","cells":[{"id":24,"value":"# Use Inputs.form with a template\n## See also: [Horizontal inputs](https://observablehq.com/@tophtucker/horizontal-inputs)\n\n[Jakub Novotny asks](https://stackoverflow.com/questions/73937368/observablehq-is-it-possible-to-have-inputs-with-custom-html): “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.”\n\n[Observable Inputs](https://observablehq.com/@observablehq/inputs) includes a [_form_ input](https://observablehq.com/@observablehq/input-form), which takes an array or object of inputs. It lets you render a bunch of inputs in one cell, and get their values combined into one object. Here are the inputs:","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"viewof form = Inputs.form({\n option1: Inputs.checkbox([\"A\", \"B\"], {label: \"Select some\"}),\n option2: Inputs.range([0, 100], {label: \"Amount\", step: 1})\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"And here are the values:","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"form","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"The [docs](https://github.com/observablehq/inputs#inputsforminputs-options) note that it takes a _template_ option, “a function that takes the given inputs and returns an HTML element to display.” For example, we can make a collapsible color-picker with the [details element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details):","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"viewof rgb = Inputs.form([\n Inputs.range([0, 255], {step: 1, label: \"r\"}),\n Inputs.range([0, 255], {step: 1, label: \"g\"}),\n Inputs.range([0, 255], {step: 1, label: \"b\"})\n], {template: inputs => htl.html`

Color

\n ${inputs}\n

`})","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"rgb","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"You can also pass the inputs as an object, and get the values as an object. But you can’t interpolate a whole object at once in htl.html for the template; you can refer to them one by one, or get them all as an array with Object.values:","pinned":false,"hidden":false,"mode":"md"},{"id":195,"value":"viewof rgb1 = Inputs.form({\n r: Inputs.range([0, 255], {step: 1, label: \"r\"}),\n g: Inputs.range([0, 255], {step: 1, label: \"g\"}),\n b: Inputs.range([0, 255], {step: 1, label: \"b\"})\n}, {template: inputs => htl.html`

Color

\n ${Object.values(inputs)}\n

`})","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"rgb1","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"You can nest forms, and your template can put different nested inputs in different places, so you can have several collapsible sections with different options:","pinned":false,"hidden":false,"mode":"md"},{"id":112,"value":"viewof nestedForm = Inputs.form([\n Inputs.form({\n a: Inputs.range([0, 100], { label: \"Amount\", step: 1 }),\n b: Inputs.select([\"A\", \"B\"], { label: \"Select one\" })\n }),\n Inputs.form({\n a: Inputs.range([0, 100], { label: \"Number\", step: 1 }),\n b: Inputs.checkbox([\"C\", \"D\", \"E\"], { label: \"Select any\" })\n })\n], {template: inputs => htl.html`

Section 1

${inputs[0]}

Section 2

${inputs[1]}

`})","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"nestedForm","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"Finally, since [Jakub Novotny’s accordions](https://observablehq.com/@novotny1akub/accordion-menu) looked different, I’ll note that you can style the details element with CSS, or animate it using the [Web Animations API](https://css-tricks.com/how-to-animate-the-details-element-using-waapi/). ","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"Inputs.form([\n Inputs.range([0, 255], {step: 1, label: \"r\"}),\n Inputs.range([0, 255], {step: 1, label: \"g\"}),\n Inputs.range([0, 255], {step: 1, label: \"b\"})\n], {template: inputs => htl.html`

Color

\n ${inputs}\n

\n\n`})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}