Skip to main content

value

Description​

String prop that holds the current filter query in field-ID form

Use it to read the current query, pre-populate the input on mount, or persist and restore filter state across sessions.

Usage​

value?: string;

Default: ""

Example​

import { useState } from "react";
import { FilterQuery } from "@svar-ui/react-filter";

function App() {
  const fields = [
    { id: "status", label: "Status", type: "text" },
    { id: "created", label: "Created", type: "date" },
  ];

  const [query, setQuery] = useState("status: Open");

  return (
    <>
      <FilterQuery
        fields={fields}
        value={query}
        onChange={({ value }) => setQuery(value)}
      />

      <p>Current query (field-ID form): {query}</p>
    </>
  );
}

export default App;

Details​

The component maintains two parallel representations internally: the displayed text uses sanitized field labels (what the user sees), while value always contains the stable field-ID form (e.g., first_name: Alex instead of FirstName: Alex). Assigning a value externally converts it to labels for display; user input converts labels back to IDs before updating the prop.

Related articles: