Published
Edited
Feb 6, 2021
Importers
Insert cell
Insert cell
viewof simple = checkbox('Enable flux capacitor')
Insert cell
simple
Insert cell
viewof enabled = checkbox({
title: 'A title',
description: "Just a single checkbox to toggle",
label: "Enabled"
})
Insert cell
enabled
Insert cell
function checkbox(config = {}) {
const { title, description, label, checked } =
typeof config === 'string' ? { label: config } : config;
const form = input({
type: "checkbox",
title,
description,
getValue: input => input.checked,
form: html`
<form>
<label style="display: inline-block; margin: 5px 10px 3px 0; user-select: none; -webkit-user-select: none; font-size: 0.85em;">
<input
type="checkbox"
name="input"
${checked ? "checked" : ""}
style="margin-bottom: 5px;"
/>
${label}
</label>
</form>
`
});
form.output.remove();
return form;
}
Insert cell
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