{
  "id": "a6b7c716bbebfc5093686458",
  "source": "solid:signals",
  "type": "github-document",
  "title": "switch-and-match",
  "content": "---\ntitle: \u003cSwitch\u003e / \u003cMatch\u003e\norder: 5\nuse_cases: \u003e-\n  multiple conditions, routing, complex branching, state machines, multi-way\n  decisions, replacing if-else chains\ntags:\n  - conditional\n  - routing\n  - control-flow\n  - components\n  - branching\n  - switch\nversion: '1.0'\ndescription: \u003e-\n  Handle multiple exclusive conditions in SolidJS with Switch and Match. Clean\n  alternative to if-else chains for complex conditional rendering.\n---\n\nUseful for when there are more than 2 mutual exclusive conditions. It is a more flexible version of the if-else-if-else-if-else-... chain.\n\n```ts\nimport { Switch, Match } from \"solid-js\"\nimport type { MatchProps, JSX } from \"solid-js\"\n\nfunction Switch(props: {\n\tfallback?: JSX.Element\n\tchildren: JSX.Element\n}): () =\u003e JSX.Element\n\ntype MatchProps\u003cT\u003e = {\n\twhen: T | undefined | null | false\n\tchildren: JSX.Element | ((item: T) =\u003e JSX.Element)\n}\nfunction Match\u003cT\u003e(props: MatchProps\u003cT\u003e)\n```\n\nA super simple implementation of this component would be:\n\n```tsx\nfunction Switch(props) {\n\tlet children = props.children\n\n\tif (!Array.isArray(children)) children = [children]\n\n\tfor (let i = 0; i \u003c children.length; i++) {\n\t\tconst child = children[i]\n\t\tif (child.props.when) return child\n\t}\n\n\treturn props.fallback\n}\n```\n\nFor example, it can be used to perform basic routing:\n\n```tsx\n\u003cSwitch fallback={\u003cdiv\u003eNot Found\u003c/div\u003e}\u003e\n\t\u003cMatch when={state.route === \"home\"}\u003e\n\t\t\u003cHome /\u003e\n\t\u003c/Match\u003e\n\t\u003cMatch when={state.route === \"settings\"}\u003e\n\t\t\u003cSettings /\u003e\n\t\u003c/Match\u003e\n\u003c/Switch\u003e\n```\n\nMatch also supports function children to serve as keyed flow.\n\n## Props\n\n### Switch\n\n| Name       | Type          | Default     | Description                                                                      |\n| ---------- | ------------- | ----------- | -------------------------------------------------------------------------------- |\n| `fallback` | `JSX.Element` | `undefined` | The fallback element to render if no `Match` component has a truthy `when` prop. |\n\n### Match\n\n| Name   | Type                              | Default     | Description                                                               |\n| ------ | --------------------------------- | ----------- | ------------------------------------------------------------------------- |\n| `when` | `T \\| undefined \\| null \\| false` | `undefined` | The condition to check. If it is truthy, the `children` will be rendered. |",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/components/switch-and-match.mdx",
  "metadata": {
    "path": "src/routes/reference/components/switch-and-match.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 2389,
    "source_type": "github"
  },
  "hash": "e2c9f7f0bbe78e7aa839f71dbc24c8a0335dd2ceadf23dfb25c2fcf39f455f1d",
  "timestamp": "2026-02-23T11:43:00.189241287+01:00"
}