2d:null 2e:["$","title",null,{"children":"Input forms tabbed with details tags | Jim | Observable"}] 33:T572,## Documentation ### Setup: ```javascript import {detailsTabMode, detailsTabGroup} from "@anoved/details-form-tabs" ``` Create an array of objects with `id`, `name`, and `form` properties to define the `tabs`. The `id` is applied to the corresponding HTML `details` tag *and* the form value corresponding to that tab group. The `name` is used to label the radio button options in the mode selector and to label the `summary` tags heading each form. The `form` object is passed to [`Inputs.form`](https://observablehq.com/@observablehq/input-form?collection=@observablehq/inputs); it is assumed to contain [Observable Inputs](https://observablehq.com/documentation/inputs/overview). ### Usage: ```javascript viewof mode = detailsTabMode(tabs); viewof form = detailsTabGroup(tabs, mode); ``` Find the value of all forms fields grouped under `form` (e.g. `form.rgb.r`, if there is a tab with ID `rgb` containing an Input with ID `r`, as in the example below). Find the `id` of the selected tab in the value of `mode`. Note that, by design, the user is free to hide and show all tabs and set the value of all inputs regardless of the state of `mode`. The function of the tab mode radio buttons (and the intent of this tool) is just a convenience to keep complex forms compact and focus on one section at a time; it does not otherwise limit or enforce any particular interaction.34:[] 31:{"id":"c4415832e022a44b","slug":"details-form-tabs","title":"Input forms tabbed with details tags","thumbnail":"f350378ea866f23eb14102d212f563dc6bb05893a666433e3115e780bd5f6a6d","access_level":"public","create_time":"$D2026-02-18T18:58:56.760Z","update_time":"$D2026-07-21T21:59:12.671Z","view_time":null,"first_public_time":"$D2026-02-22T22:38:03.719Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2800813008160316","login":"anoved","name":"Jim","avatar_url":"https://avatars-next.observableusercontent.com/0fb3dfff35196c46f19129bf9fbff47fd5a38d53dde09e0c9b40afac9955c0ba","tier":"starter_2024"},"version":552,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fdf70a3cc8779b08","login":"anoved","name":"Jim DeVona","avatar_url":"https://avatars-next.observableusercontent.com/0fb3dfff35196c46f19129bf9fbff47fd5a38d53dde09e0c9b40afac9955c0ba","tier":null}],"members":[{"type":"individual","id":"fdf70a3cc8779b08","login":"anoved","name":"Jim DeVona","avatar_url":"https://avatars-next.observableusercontent.com/0fb3dfff35196c46f19129bf9fbff47fd5a38d53dde09e0c9b40afac9955c0ba","tier":null,"role":"editor"},{"type":"team","id":"2800813008160316","login":"anoved","name":"Jim","avatar_url":"https://avatars-next.observableusercontent.com/0fb3dfff35196c46f19129bf9fbff47fd5a38d53dde09e0c9b40afac9955c0ba","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"75d93e7d88cb698f","slug":"techniques","title":"Techniques","owner":{"id":"2800813008160316","login":"anoved","name":"Jim"}},"type":"notebook","body":{"title":"Input forms tabbed with details tags","cells":[{"id":0,"value":"# Input forms tabbed with `details` tags\n\nWrap [Input forms](https://observablehq.com/@observablehq/input-form) in [`details` tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details) paired with a radio button to quickly toggle \"tabs\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":446,"value":"

Example

Use the tabbed options below to control the background color of this section.\n You can interact with all controls in the tabbed form, but only the color from the selected mode will be applied.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"viewof colorMode = detailsTabMode(colorForms, {label: \"Select mode\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"viewof colorInput = detailsTabGroup(colorForms, colorMode)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":428,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":335,"value":"function detailsTabMode(tabs, {label = \"\"} = {}) {\n return Inputs.radio(tabs, {\n label,\n keyof: t => t.name,\n valueof: t => t.id,\n value: tabs[0].id\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"function detailsTabGroup(tabs, mode = [true]) {\n return Inputs.form(Object.fromEntries(\n tabs.map((t, i, a) => [t.id, detailsTab(a, i, mode)])\n ));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"Magic mode flag:\n\n* If `statevar` is `[true]` or `[false]`, start with all tabs open or closed, respectively.\n* If `statevar` is a list of more than one boolean value, assume there is a value for each tab and initialize its state accordingly.\n* Otherwise, assume `statevar` is a string naming the `id` of the tab that should be open. Others will initially appear closed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":165,"value":"function detailsTab(tabs, tabIndex, statevar) {\n return Inputs.form(tabs[tabIndex].form, {\n template: (inputs) => {\n let openstate = (Array.isArray(statevar) ? (statevar.length > 1 ? statevar[tabIndex] : statevar[0]) : (statevar == tabs[tabIndex].id));\n return htl.html`\n

${tabs[tabIndex].name}

${Object.values(inputs)}

\n `;\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"## Example Setup\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":194,"value":"colorForms = [\n {id: \"rgb\", name: \"RGB Values\", form: {\n r: Inputs.range([0, 255], {width: width, step: 1, label: \"red\", value: 180}),\n g: Inputs.range([0, 255], {width: width, step: 1, label: \"green\", value: 255}),\n b: Inputs.range([0, 255], {width: width, step: 1, label: \"blue\", value: 222})\n }},\n {id: \"html\", name: \"HTML Code\", form: {\n colorcode: Inputs.color({width: width, label: \"Color code\", value: \"#ff8080\"})\n }},\n {id: \"text\", name: \"Name\", form: {\n // named colors sampled from https://www.w3schools.com/cssref/css_colors.php\n colorname: Inputs.select([\"bisque\", \"coral\", \"cornsilk\", \"papayawhip\"], {width: width, label: \"Color name\", value: \"bisque\"})\n }}\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"document.getElementById(\"colorbox\").style.backgroundColor =\n colorMode == \"text\" ? colorInput.text.colorname :\n colorMode == \"html\" ? colorInput.html.colorcode :\n `rgb(${Object.values(colorInput.rgb).join(\",\")})`;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"