3e:null 3f:["$","title",null,{"children":"Use Inputs.form with a template | Mubanga Nsofu | Observable"}] 45:[] 43:{"id":"f38689c157b9c756","slug":null,"title":"Use Inputs.form with a template","thumbnail":"e87e9d2403012892a1e00d22bb3e7f00b043f2a84f3d8bceff94a67cf9025657","access_level":"public","create_time":"$D2022-12-06T22:08:24.677Z","update_time":"$D2022-12-06T22:08:24.677Z","view_time":null,"first_public_time":"$D2022-12-06T22:08:24.677Z","has_unpublished_edits":null,"fork":{"id":"6c17f3e0d3568bfe","slug":"use-inputs-form-with-a-template","title":"Use Inputs.form with a template","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f466891b319ebe82","login":"mubangansofujr","name":"Mubanga Nsofu","avatar_url":"https://avatars-next.observableusercontent.com/4b005c4c9d6b341d61dc750c7789ff06fd47dd3bc7d44c0243fea63e28208c53","tier":"starter_2024","bio":"","following":false},"version":213,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"40936f732a34be3d","login":"mubangansofujr","name":"Mubanga Nsofu","avatar_url":"https://avatars-next.observableusercontent.com/4b005c4c9d6b341d61dc750c7789ff06fd47dd3bc7d44c0243fea63e28208c53","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"40936f732a34be3d","login":"mubangansofujr","name":"Mubanga Nsofu","avatar_url":"https://avatars-next.observableusercontent.com/4b005c4c9d6b341d61dc750c7789ff06fd47dd3bc7d44c0243fea63e28208c53","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"And here are the values:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"form","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"rgb","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"rgb1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"nestedForm","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"