Inputs

Reactive inputs, adapted from @observablehq/inputs.

Want More?

Currently Genji only exports a subset of inputs in @observablehq/inputs, you can open a PR if you want more.

fromElement(element)

Returns a input that produce new value whenever the given element emits an input event, with the given element’s current value.

custom = Inputs.fromElement(document.createElement("input"));

`custom is ${custom}.`;

button(content[, options])

Returns a button input. For more information, refer to the @observablehq/inputs#button documentation.

count = Inputs.button("Add", {
  value: 1,
  reduce: (value) => value + 1,
});

call(() => {
  const div = document.createElement("div");
  const span = () => `
    <span style="
      display:inline-block;
      width: 10px;
      height: 30px;
      background: black;
    ">
    </span>`;
  div.innerHTML = Array.from({ length: count }, span).join("");
  return div;
});

color(options)

Returns a color input. For more information, refer to the @observablehq/inputs#color documentation.

fill = Inputs.color({ label: "fill", value: "#000" });

call(() => {
  const div = document.createElement("div");
  div.style.width = "100px";
  div.style.height = "100px";
  div.style.background = fill;
  return div;
});

range(extent[, options])

Returns a range input. For more information, refer to the @observablehq/inputs#range documentation.

size = Inputs.range([0, 300], { label: "size", value: 100, step: 1 });

call(() => {
  const div = document.createElement("div");
  div.style.width = size + "px";
  div.style.height = "100px";
  div.style.background = "black";
  return div;
});

select(data[, options])

Returns a select input. For more information, refer to the @observablehq/inputs#select documentation.

type = Inputs.select(["S", "M", "L"], { label: "type" });

call(() => {
  const div = document.createElement("div");
  const size = type === "S" ? 50 : type === "M" ? 100 : 150;
  div.style.width = size + "px";
  div.style.height = size + "px";
  div.style.background = "black";
  return div;
});

toggle(options)

Returns a toggle input. For more information, refer to the @observablehq/inputs#toggle documentation.

mute = Inputs.toggle({ label: "Mute" });

mute;

radio(data[, options])

Returns a radio input. For more information, refer to the @observablehq/inputs#radio documentation.

color = Inputs.radio(["red", "green", "blue"], {
  label: "Color",
  value: "red",
});

call(() => {
  const div = document.createElement("div");
  div.style.width = 100 + "px";
  div.style.height = 100 + "px";
  div.style.background = color;
  return div;
});

table(data[, options])

Returns a table input. For more information, refer to the @observablehq/inputs#table documentation.

data = Inputs.table([
  { genre: "Sports", sold: 275 },
  { genre: "Strategy", sold: 115 },
  { genre: "Action", sold: 120 },
  { genre: "Shooter", sold: 350 },
  { genre: "Other", sold: 150 },
]);

data;

search(data[,options])

Returns a search input. For more information, refer to the @observablehq/inputs#search documentation.

state = Inputs.search(
  ["Alabama", "Alaska", "Arizona", "Arkansas", "California"],
  { label: "State" }
);

state;

text(options)

Returns a text input. For more information, refer to the @observablehq/inputs#text documentation.

name = Inputs.text({ label: "Name", placeholder: "Enter your name" });

`You name is ${name}.`;