Unlisted
Edited
Jul 6, 2023
Insert cell
Insert cell
<div class="theme-obs">
<div class="flex">
<div class="mr-auto">${[radioGroup]}</div>
</div>
</div>
Insert cell
values = ['salty', 'sweet', 'bitter', 'sour', 'umami']
Insert cell
options = ""
Insert cell
radioGroup = Inputs.radio(values, options)
Insert cell
ns = Inputs.text().classList[0]
Insert cell
html`<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">`
Insert cell
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-obs input {
accent-color: rebeccapurple;
}

.theme-obs form {
width: auto;
}

.theme-obs 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>`
Insert cell
tachyons = {
const src = "https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css";
const n = html`<link rel=stylesheet href="${src}">`;
const api = {
attach: () => document.querySelector("head").prepend(n),
detach: () => n.parentNode && n.parentNode.removeChild(n)
};
api.attach();
invalidation.then(api.detach);
return api;
}
Insert cell

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.
Learn more