https://twitter.com/unkleho
viewof ch = checkbox({
title: "Colors",
description: "Please select your favorite colors",
options: [
{ value: "r", label: "Red", color: "red" },
{ value: "o", label: "Orange", color: "orange" },
{ value: "y", label: "Blue", color: "blue" }
],
value: ["r", "o"]
})
ch
function checkbox(config = {}) {
let { value: formValue, title, description, submit, options } = Array.isArray(
config
)
? { options: config }
: config;
options = options.map(o =>
typeof o === "string" ? { value: o, label: o } : o
);
const form = input({
type: "checkbox",
title,
description,
submit,
getValue: input => {
if (input.length)
return Array.prototype.filter
.call(input, i => i.checked)
.map(i => i.value);
return input.checked ? input.value : false;
},
form: html`
<form>
${options.map(({ value, label, color }) => {
const colorBlock = html`<span style="display: inline-block; background-color: ${color}; width: 1em; height: 1em; border-radius: 1em"></span>`;
const input = html`<input type=checkbox name=input ${
(formValue || []).indexOf(value) > -1 ? "checked" : ""
} style="vertical-align: baseline;" />`;
input.setAttribute("value", value);
const tag = html`<label style="display: inline-block; margin: 5px 10px 3px 0; font-size: 0.85em;">
${input}
${colorBlock}
${label}
</label>`;
return tag;
})}
</form>
`
});
form.output.remove();
return form;
}
import {input} from "@jashkenas/inputs"
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.
