viewof form = Inputs.form({
option1: Inputs.checkbox(["A", "B"], {label: "Select some"}),
option2: Inputs.range([0, 100], {label: "Amount", step: 1})
})
form
viewof rgb = Inputs.form([
Inputs.range([0, 255], {step: 1, label: "r"}),
Inputs.range([0, 255], {step: 1, label: "g"}),
Inputs.range([0, 255], {step: 1, label: "b"})
], {template: inputs => htl.html`<details open>
<summary>Color</summary>
${inputs}
</details>`})
rgb
viewof rgb1 = Inputs.form({
r: Inputs.range([0, 255], {step: 1, label: "r"}),
g: Inputs.range([0, 255], {step: 1, label: "g"}),
b: Inputs.range([0, 255], {step: 1, label: "b"})
}, {template: inputs => htl.html`<details open>
<summary>Color</summary>
${Object.values(inputs)}
</details>`})
rgb1
viewof nestedForm = Inputs.form([
Inputs.form({
a: Inputs.range([0, 100], { label: "Amount", step: 1 }),
b: Inputs.select(["A", "B"], { label: "Select one" })
}),
Inputs.form({
a: Inputs.range([0, 100], { label: "Number", step: 1 }),
b: Inputs.checkbox(["C", "D", "E"], { label: "Select any" })
})
], {template: inputs => htl.html`<div>
<details><summary>Section 1</summary>${inputs[0]}</details>
<details><summary>Section 2</summary>${inputs[1]}</details>
</div>`})
nestedForm
Inputs.form([
Inputs.range([0, 255], {step: 1, label: "r"}),
Inputs.range([0, 255], {step: 1, label: "g"}),
Inputs.range([0, 255], {step: 1, label: "b"})
], {template: inputs => htl.html`<details class="styled">
<summary>Color</summary>
${inputs}
</details>
<style>
details.styled {
border: 1px solid black;
border-radius: 5px;
padding: 10px;
}
details.styled summary {
list-style: none;
cursor: pointer;
border-bottom: 1px solid transparent;
}
details.styled summary:hover {
font-style: italic;
border-bottom: 1px solid #ccc;
}
details.styled[open] {
background: #eee;
}
details.styled[open] summary {
border-bottom: 1px solid black;
margin-bottom: 1rem;
}
</style>
`})
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.
