Consultant Designer & Developer
viewof flavors = clearableRadio(['salty', 'sweet', 'bitter', 'sour', 'umami'], {
label: 'Flavor'
})
flavors
clearableRadio = (values, options) => {
const radioGroup = Inputs.radio(values, options);
const clearBtn = Inputs.button("Clear Selection", {
reduce: (r) => {
reset(radioGroup, null);
return r + 1;
}
});
return view`<div class="theme-adb">
<div class="flex">
<div class="mr-auto">${["selection", radioGroup]}</div>
<div>${["cleared", clearBtn]}</div>
</div>
</div>`;
}
html`<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">`
ns = Inputs.text().classList[0]
html`<style>
:root {
/* 1️⃣ CSS properties used in @observablehq/Inputs
* This only support the CSS proporties used in each Inputs
*/
--sans-serif: "Roboto Mono", sans-serif;
}
/* 2️⃣ Style using custom namespaced classname */
.theme-adb input {
accent-color: rebeccapurple;
}
.theme-adb form {
width: auto;
}
.theme-adb form > label {
font-weight: bold;
}
/* 3️⃣ Style using Inputs' namespaced classname
* This approach you can pretty much override anything.
*/
.${ns}{
margin-bottom: 1em;
}
.${ns} div label {
background-color: #f4f4f4;
padding: 0.25rem 0.5rem;
border-radius: 0.5rem;
}
.${ns} div label:hover,
.${ns} div label:active,
.${ns} div label:focus {
background-color: #cdecff;
}
</style>`
// Based on https://observablehq.com/@observablehq/synchronized-inputs
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", { bubbles: true }));
}
function reset(form, value) {
if (!form.length) return;
for (const n of form) n.checked = null;
form.dispatchEvent(new Event("form", { bubbles: true }));
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
