Widget Configuration

Settings controlling widget behaviour.

html

<form class="wconfig" style="--c:#D9C8F0;" aria-label="Configure Traffic by source">
  <label class="wconfig__field">
    <span>Widget title</span>
    <input type="text" class="wconfig__input" value="Traffic by source">
  </label>
  <label class="wconfig__field">
    <span>Refresh interval <span class="wconfig__hint">(currently 1m)</span></span>
    <select class="wconfig__select">
      <option value="30s">30 seconds</option>
      <option value="1m">1 minute</option>
      <option value="5m">5 minutes</option>
      <option value="manual">Manual only</option>
    </select>
  </label>
  <label class="wconfig__toggle">
    <input type="checkbox" checked>
    <span>Show legend</span>
  </label>
</form>
<style>
.wconfig { display: grid; gap: 10px; font: 13px system-ui, sans-serif; color: #241430; max-width: 260px; }
.wconfig__field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.wconfig__input, .wconfig__select { border: 1.5px solid var(--c); border-radius: 6px; padding: 6px 8px; font: inherit; background: #FAF7F2; color: #241430; }
.wconfig__input:focus-visible, .wconfig__select:focus-visible { outline: 2px solid var(--c); }
.wconfig__toggle { display: flex; align-items: center; gap: 6px; }
.wconfig__hint { opacity: .6; font-weight: 400; }
</style>

tailwind

<form class="wconfig-tw grid gap-2.5 font-sans text-[13px] text-[#241430] max-w-xs" style="--c:#D9C8F0;" aria-label="Configure Traffic by source">
  <label class="flex flex-col gap-0.5 text-xs">
    <span>Widget title</span>
    <input type="text" class="border-[1.5px] rounded-md px-2 py-1.5 bg-[#FAF7F2] text-[#241430]" style="border-color:var(--c);" value="Traffic by source">
  </label>
  <label class="flex flex-col gap-0.5 text-xs">
    <span>Refresh interval <span class="opacity-60 font-normal">(currently 1m)</span></span>
    <select class="border-[1.5px] rounded-md px-2 py-1.5 bg-[#FAF7F2] text-[#241430]" style="border-color:var(--c);">
      <option value="30s">30 seconds</option>
      <option value="1m">1 minute</option>
      <option value="5m">5 minutes</option>
      <option value="manual">Manual only</option>
    </select>
  </label>
  <label class="flex items-center gap-1.5">
    <input type="checkbox" checked>
    <span>Show legend</span>
  </label>
</form>

react

export function WidgetConfiguration({
  title = "Traffic by source",
  refreshInterval = "1m",
  showLegend = true,
  color = "#D9C8F0",
}) {
  return (
    <form aria-label={"Configure " + title} style={{ display: "grid", gap: 10, font: "13px system-ui, sans-serif", color: "#241430", maxWidth: 260 }}>
      <label style={{ display: "flex", flexDirection: "column", gap: 3, fontSize: 12 }}>
        <span>Widget title</span>
        <input type="text" defaultValue={title} style={{ border: "1.5px solid " + color, borderRadius: 6, padding: "6px 8px", background: "#FAF7F2", color: "#241430" }} />
      </label>
      <label style={{ display: "flex", flexDirection: "column", gap: 3, fontSize: 12 }}>
        <span>Refresh interval</span>
        <select defaultValue={refreshInterval} style={{ border: "1.5px solid " + color, borderRadius: 6, padding: "6px 8px", background: "#FAF7F2", color: "#241430" }}>
          <option value="30s">30 seconds</option>
          <option value="1m">1 minute</option>
          <option value="5m">5 minutes</option>
          <option value="manual">Manual only</option>
        </select>
      </label>
      <label style={{ display: "flex", alignItems: "center", gap: 6 }}>
        <input type="checkbox" defaultChecked={showLegend} />
        <span>Show legend</span>
      </label>
    </form>
  );
}