Input.select() that allows selecting and deselecting all options

Community Help
1

Hi all!

I was having a look at this dashboard: Tanya Shapiro - NBA Player Stats
I am mostly attracted by the inputs on the left side. This are done by customizing OJS Inputs, as revealed by the author. I’d guess that there is much code involved in the background. Is anyone aware if there is any notebook/function available that enables these type of inputs? E.g. inputs that allow to select all or deselect all of the options, etc. I think I have seen something similar in Observable but can’t really remember/find where.

1 Like
2

You can create your own input. Since the collapsed state isn’t editable the implementation is fairly straight forward.

Here’s a barebones example to get you started:

viewof myForm = {
  const form = Inputs.checkbox(["foo", "bar", "baz"], {value: ["foo"], label: "Choices"});
  
  const preview = htl.html`<input type="text" readonly>`;
  const update = () => preview.value = form.value.join(",");
  update();
  form.addEventListener("input", update);

  const toggleAll = (state) => {
    for(const n of form.elements) if(n.checked === !state) n.click();
  };
  const selectAll = htl.html`<button onclick=${() => toggleAll(true)}>Select all`;
  const clearAll = htl.html`<button onclick=${() => toggleAll(false)}>Clear all`;

  form.lastElementChild.style.cssText += "display:flex;flex-direction:column"
  form.lastElementChild.prepend(
    preview,
    htl.html`<div style="padding:8px 0">${selectAll}${clearAll}`
  );

  return form;
}

image.png772×254 10.7 KB

1 Like
3

Her notebook for the inputs is public and includes instructions and examples of how to use them.

1 Like