options
Description
Required. An object with field options or a function that receives field id and returns optionsUsage
options: { [key: string]: AnyData[] }
  | ((field: string) => AnyData[] | Promise<AnyData[]>);
Parameters
If options is an object, each parameter is the key that should match the field id of the fields property.
The property can be a function that receives field id and returns options. The function can return options synchronously or asynchronously.
Example
import { getData } from "./common/data";
import { FilterBuilder } from "@svar-ui/react-filter";
export default function App() {
  const { value } = getData();
  const fields = [
    { id: "first_name", label: "First Name", type: "text" },
    { id: "age", label: "Age", type: "number" },
    { id: "start", label: "Start Date", type: "date" },
  ];
  const options = {
    first_name: ["Alex", "Adam", "Agata"],
    age: [24, 26, 33, 35, 44, 45, 62],
    country: [new Date(2025, 1, 15), new Date(2025, 5, 11)],
  };
  return `<FilterBuilder value={value} fields={fields} options={options} />`;
}
Options for all fields can be collected from data with the getOptionsMap helper.
Options can be dynamic. You can define them as a function that is called each time a filter for this field is created. It returns either an array of options or a Promise that resolves with this array:
import { FilterBuilder } from "@svar-ui/react-filter";
async function provideOptions(fieldId) {
  const response = await fetch("server/url/" + fieldId);
  let options = await response.json();
  // convert string dates, if any
  return options;
}
export default function App({ fields, value }) {
  return `<FilterBuilder fields={fields} value={value} options={provideOptions} />`;
}
Related articles: FilterBuilder Guide