31:[] 2f:{"title":"Is Observable Inputs style-able?","cells":[{"id":0,"value":"# Is [Observable Inputs](https://observablehq.com/@observablehq/inputs) style-able?\n\n**tl;dr** Yes, ~~to an extent~~ totally!\n\nIn this example we use\n* [Namespaced classname](https://observablehq.com/@saneef/is-observable-inputs-style-able#cell-324) to target elements within the Observable Inputs component.\n* [Tachyons CSS](http://tachyons.io/) to style HTML elements around the Observable Inputs. We create a sample component, [Clearable Radio](https://observablehq.com/d/7c63bac614767747#cell-249).\n","pinned":false,"hidden":false,"mode":"md"},{"id":276,"value":"viewof flavors = clearableRadio(['salty', 'sweet', 'bitter', 'sour', 'umami'], {\n label: 'Flavor'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"flavors","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"## Clearable Radio","pinned":false,"hidden":false,"mode":"md"},{"id":310,"value":"Here I'm using [@tomlarkworthy’s](https://observablehq.com/@tomlarkworthy) [`view`](https://observablehq.com/@tomlarkworthy/view) to compose Observable Inputs and HTML elements. The `view` will return an object with values from each Inputs. If we use the default `html` or `htl.html`, we won't able to extract the `value` from the Inputs.","pinned":false,"hidden":false,"mode":"md"},{"id":268,"value":"clearableRadio = (values, options) => {\n const radioGroup = Inputs.radio(values, options);\n\n const clearBtn = Inputs.button(\"Clear Selection\", {\n reduce: (r) => {\n reset(radioGroup, null);\n return r + 1;\n }\n });\n\n return view`

${[\"selection\", radioGroup]}

${[\"cleared\", clearBtn]}

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"## Load Tachyons CSS*","pinned":false,"hidden":false,"mode":"md"},{"id":177,"value":"md`\n_{\n***Special thanks** to [@mootari](https://observablehq.com/@mootari) for [this technique](https://observablehq.com/@mootari/combined-and-custom-forms) :)\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"tachyons = {\n const src = \"https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css\";\n const n = html``;\n const api = {\n attach: () => document.querySelector(\"head\").prepend(n),\n detach: () => n.parentNode && n.parentNode.removeChild(n)\n };\n api.attach();\n invalidation.then(api.detach);\n return api;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"html`

This text will be green if Tachyons CSS have loaded.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"## Loading Google Fonts","pinned":false,"hidden":false,"mode":"md"},{"id":106,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"## Get current class namespace of `Inputs`*\n\n_{\n***Thanks** [@mootari](https://observablehq.com/@mootari) for this technique!\n}","pinned":false,"hidden":false,"mode":"md"},{"id":334,"value":"ns = Inputs.text().classList[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"## Test CSS styles\n\nSome CSS styles to override default [Observable Inputs](observablehq.com/@observablehq/inputs) styles.","pinned":false,"hidden":false,"mode":"md"},{"id":337,"value":"Three ways in which you can override the styles of Inputs are marked with 1️⃣, 2️⃣, and 3️⃣ in the below CSS snippet.","pinned":false,"hidden":false,"mode":"md"},{"id":115,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"## Helper functions","pinned":false,"hidden":false,"mode":"md"},{"id":159,"value":"// Based on https://observablehq.com/@observablehq/synchronized-inputs\nfunction set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"function reset(form, value) {\n if (!form.length) return;\n for (const n of form) n.checked = null;\n form.dispatchEvent(new Event(\"form\", { bubbles: true }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"import { view } from \"@tomlarkworthy/view\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}