Calendar Filter

Restricts visible events.

html

<fieldset class="calfilter">
  <legend class="calfilter__title">Calendars</legend>
  <label class="calfilter__row">
    <input type="checkbox" checked />
    <span class="calfilter__dot" style="background:#A8E6C1;"></span>
    Work
  </label>
  <label class="calfilter__row">
    <input type="checkbox" checked />
    <span class="calfilter__dot" style="background:#F5C2E0;"></span>
    Personal
  </label>
  <label class="calfilter__row">
    <input type="checkbox"  />
    <span class="calfilter__dot" style="background:#E8A020;"></span>
    Holidays
  </label>
</fieldset>
<style>
.calfilter { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 240px; padding: 16px 18px; border-radius: 12px; border: 1px solid #24143020; box-sizing: border-box; }
.calfilter__title { font-weight: 700; padding: 0 4px; }
.calfilter__row { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.calfilter__dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.calfilter__row input:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<fieldset class="w-[240px] p-4 rounded-xl border border-[#24143020] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2]">
  <legend class="font-bold px-1">Calendars</legend>
  <label class="flex items-center gap-2.5 py-1.5 cursor-pointer">
    <input type="checkbox" class="focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#241430]" checked />
    <span class="w-2.5 h-2.5 rounded-full inline-block" style="background:#A8E6C1"></span>
    Work
  </label>
  <label class="flex items-center gap-2.5 py-1.5 cursor-pointer">
    <input type="checkbox" class="focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#241430]" checked />
    <span class="w-2.5 h-2.5 rounded-full inline-block bg-[#F5C2E0]"></span>
    Personal
  </label>
  <label class="flex items-center gap-2.5 py-1.5 cursor-pointer">
    <input type="checkbox" class="focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#241430]"  />
    <span class="w-2.5 h-2.5 rounded-full inline-block bg-[#E8A020]"></span>
    Holidays
  </label>
</fieldset>

react

export function CalendarFilter({
  title = "Calendars",
  workVisible = true,
  personalVisible = true,
  holidaysVisible = false,
  accent = "#A8E6C1",
}) {
  const row = { display: "flex", alignItems: "center", gap: 10, padding: "6px 0", cursor: "pointer" };
  const dot = (c) => ({ width: 10, height: 10, borderRadius: 999, display: "inline-block", background: c });
  return (
    <fieldset style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 240, padding: "16px 18px", borderRadius: 12, border: "1px solid #24143020", boxSizing: "border-box" }}>
      <legend style={{ fontWeight: 700, padding: "0 4px" }}>{title}</legend>
      <label style={row}><input type="checkbox" defaultChecked={workVisible} /><span style={dot(accent)} />Work</label>
      <label style={row}><input type="checkbox" defaultChecked={personalVisible} /><span style={dot("#F5C2E0")} />Personal</label>
      <label style={row}><input type="checkbox" defaultChecked={holidaysVisible} /><span style={dot("#E8A020")} />Holidays</label>
    </fieldset>
  );
}