Skip to main content

value

Description​

Bindable string 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​

<script>
  import { FilterQuery } from "@svar-ui/svelte-filter";

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

  let query = $state("status: Open");
</script>

<FilterQuery {fields} bind:value={query} />

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

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: