Filter Bar

Collection of filter controls.

html

<form role="search" aria-label="Filters" class="fbar fbar--compact" style="--accent:#E8A020;">
  <label class="fbar__field">
    <span class="fbar__field-label">Search</span>
    <input class="fbar__input" type="search" name="q" placeholder="Search..." style="border-radius:6px;">
  </label>
  <label class="fbar__field">
    <span class="fbar__field-label">Status</span>
    <select class="fbar__select" style="border-radius:6px;">
      <option>Any</option>
      <option>Open</option>
      <option>Closed</option>
    </select>
  </label>
  <p class="fbar__badge" role="status">3 active</p>
</form>
<style>
.fbar { display: flex; align-items: center; gap: 10px; font: 14px system-ui, sans-serif; color: #241430; flex-wrap: wrap; }
.fbar__field { display: flex; flex-direction: column; gap: 4px; }
.fbar__field-label { font-size: 11px; font-weight: 600; color: #24143099; }
.fbar__input, .fbar__select { box-sizing: border-box; padding: 7px 10px; font: inherit; color: #241430; background: #FAF7F2; border: 1.5px solid #24143040; appearance: none; }
.fbar__input:focus-visible, .fbar__select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.fbar__badge { margin: 0; padding: 6px 10px; font-size: 12px; font-weight: 600; color: #241430; background: var(--accent); }
.fbar--comfortable { gap: 16px; }
.fbar--comfortable .fbar__input, .fbar--comfortable .fbar__select { padding: 10px 14px; }
.fbar--comfortable .fbar__badge { padding: 9px 14px; }
</style>

tailwind

<form role="search" aria-label="Filters" class="fbar-tw fbar-tw--compact flex items-center gap-2.5 flex-wrap font-sans text-sm text-[#241430]" style="--accent:#E8A020;">
  <label class="flex flex-col gap-1">
    <span class="text-[11px] font-semibold text-[#24143099]">Search</span>
    <input type="search" name="q" placeholder="Search..." style="border-radius:6px;" class="box-border px-2.5 py-[7px] text-[#241430] bg-[#FAF7F2] border-[1.5px] border-[#24143040] appearance-none focus-visible:outline-none focus-visible:border-[var(--accent)]">
  </label>
  <label class="flex flex-col gap-1">
    <span class="text-[11px] font-semibold text-[#24143099]">Status</span>
    <select style="border-radius:6px;" class="box-border px-2.5 py-[7px] text-[#241430] bg-[#FAF7F2] border-[1.5px] border-[#24143040] appearance-none focus-visible:outline-none focus-visible:border-[var(--accent)]">
      <option>Any</option>
      <option>Open</option>
      <option>Closed</option>
    </select>
  </label>
  <p role="status" class="m-0 px-2.5 py-1.5 text-xs font-semibold text-[#241430] bg-[var(--accent)]">3 active</p>
</form>
<style>
.fbar-tw--comfortable { gap: 16px !important; }
.fbar-tw--comfortable input, .fbar-tw--comfortable select { padding: 10px 14px !important; }
.fbar-tw--comfortable p { padding: 9px 14px !important; }
</style>

react

export function FilterBar({
  label = "Filters",
  count = 3,
  layout = "compact",
  accent = "#E8A020",
  radius = 6,
}) {
  const comfortable = layout === "comfortable";
  const fieldInput = { boxSizing: "border-box", padding: comfortable ? "10px 14px" : "7px 10px", color: "#241430", background: "#FAF7F2", border: "1.5px solid #24143040", appearance: "none", borderRadius: radius };
  return (
    <form role="search" aria-label={label} style={{ display: "flex", alignItems: "center", gap: comfortable ? 16 : 10, flexWrap: "wrap", fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", "--accent": accent }}>
      <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
        <span style={{ fontSize: 11, fontWeight: 600, color: "#24143099" }}>Search</span>
        <input type="search" name="q" placeholder="Search..." style={fieldInput} />
      </label>
      <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
        <span style={{ fontSize: 11, fontWeight: 600, color: "#24143099" }}>Status</span>
        <select style={fieldInput}>
          <option>Any</option>
          <option>Open</option>
          <option>Closed</option>
        </select>
      </label>
      <p role="status" style={{ margin: 0, padding: comfortable ? "9px 14px" : "6px 10px", fontSize: 12, fontWeight: 600, color: "#241430", background: accent }}>{count} active</p>
    </form>
  );
}