{
  "id": "52af0c8ac44e90996ab47936",
  "source": "solid:signals",
  "type": "github-document",
  "title": "search-parameters",
  "content": "---\ntitle: Search parameters\nuse_cases: \u003e-\n  filtering, pagination, search queries, form state in url, shareable urls,\n  stateful navigation\ntags:\n  - query-params\n  - search\n  - state\n  - url\n  - routing\nversion: '1.0'\ndescription: \u003e-\n  Manage query strings and search parameters in SolidJS for filtering,\n  pagination, and maintaining state in the URL.\n---\n\nSearch parameters are used to pass data to a route using the query string.\nThe query string is the part of the URL that comes after the `?` character and is used to pass key-value pairs to the route.\n\nIn Solid Router, these query parameters can be accessed using [`useSearchParams`](/solid-router/reference/primitives/use-search-params).\nThis primitive retrieves a tuple that contains a reactive object that reads the current search parameters and a function to update them.\n\n```jsx {4}\nimport { useSearchParams } from \"@solidjs/router\";\n\nexport const App = () =\u003e {\n\tconst [searchParams, setSearchParams] = useSearchParams();\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cspan\u003eUsername: {searchParams.username}\u003c/span\u003e\n\t\t\t\u003cinput\n\t\t\t\ttype=\"text\"\n\t\t\t\tonChange={(e) =\u003e {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tsetSearchParams({ username: e.target.value });\n\t\t\t\t}}\n\t\t\t/\u003e\n\t\t\u003c/div\u003e\n\t);\n};\n```\n\nThe getter, in this case `searchParams`, is used to read the current search parameters.\n`setSearchParams` works as the setter which accepts an _object_ whose entries will be merged into the current query.\n\n## Multiple queries\n\nSince `setSearchParams` accepts an object, you can pass multiple key-value pairs to update multiple search parameters at once.\n\n```jsx\nsetSearchParams({\n\tusername: \"john\",\n\tpage: 1,\n});\n```\n\n:::note[Empty or null values]\n\tIf the value of a search parameter's key is `undefined`, `null`, or an empty\n\tstring (`\"\"`), it will be removed from the query string.\n:::\n\n## Accessing query strings\n\nIf you require accessing the query string directly, you can use the [`useLocation`](/solid-router/reference/primitives/use-location) primitive:\n\n```jsx\nimport { useLocation } from \"@solidjs/router\";\n\nexport const App = () =\u003e {\n\tconst location = useLocation();\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cspan\u003eQuery String: {location.search}\u003c/span\u003e\n\t\t\u003c/div\u003e\n\t);\n};\n```\n\nIf the URL was `http://localhost:3000/users?username=john\u0026page=1`, the output would be `Query String: ?username=john\u0026page=1`.",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/concepts/search-parameters.mdx",
  "metadata": {
    "path": "src/routes/solid-router/concepts/search-parameters.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 2372,
    "source_type": "github"
  },
  "hash": "3b08bb650d8521193e6952b8999fdc4e709f253cecf5d080e47f014445312d84",
  "timestamp": "2026-02-23T11:43:00.191835913+01:00"
}