Filtering toolbar

Combine search, a picker, and segmented navigation in one controlled filter model.

Give every control one source of truth, then derive the visible result set from that state. The toolbar itself remains ordinary semantic HTML.

import { useState } from "react"
import { Picker, SegmentedControl, TextField } from "@liquidify/react"
import "@liquidify/react/styles.css"

export function FilteringToolbar() {
  const [query, setQuery] = useState("")
  const [owner, setOwner] = useState("anyone")
  const [status, setStatus] = useState("open")

  return (
    <section aria-labelledby="filters-title">
      <h2 id="filters-title">Filters</h2>

      <TextField
        aria-label="Search issues"
        type="search"
        value={query}
        onChange={setQuery}
        placeholder="Search issues"
        clearable
      />

      <Picker
        aria-label="Owner"
        items={[
          { value: "anyone", label: "Anyone" },
          { value: "me", label: "Assigned to me" },
          { value: "unassigned", label: "Unassigned" },
        ]}
        value={owner}
        onChange={setOwner}
      />

      <SegmentedControl aria-label="Issue status" value={status} onChange={setStatus}>
        <SegmentedControl.Item value="open">Open</SegmentedControl.Item>
        <SegmentedControl.Item value="closed">Closed</SegmentedControl.Item>
        <SegmentedControl.Item value="all">All</SegmentedControl.Item>
      </SegmentedControl>

      <p aria-live="polite">Showing {status} issues for {owner} matching “{query}”.</p>
    </section>
  )
}

In a routed application, serialize the same three values into the URL so filtered views are shareable. Parse the route before the first render to keep server and client state deterministic.