{
  "id": "de43c7c4aa2396d5bd9aca68",
  "source": "solid:signals",
  "type": "github-document",
  "title": "conditional-rendering",
  "content": "---\ntitle: Conditional rendering\norder: 1\nuse_cases: \u003e-\n  showing/hiding content, loading states, error displays, user permissions,\n  dynamic ui, feature toggles\ntags:\n  - conditional\n  - rendering\n  - show\n  - switch\n  - match\n  - ui\nversion: '1.0'\ndescription: \u003e-\n  Conditionally render UI elements in Solid using Show, Switch, and Match\n  components for clean, readable conditional logic.\n---\n\nConditional rendering is the process of displaying different UI elements based on certain conditions.\nThis is a common pattern in UI development, and is often used to show or hide elements based on user input, data, or other conditions.\n\nSolid offers dedicated components to handle conditional rendering in a more straightforward and readable way.\n\n## Show\n\n`\u003cShow\u003e` renders its children when a condition is evaluated to be true.\nSimilar to the [ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) in JavaScript, it uses control logic flow within JSX to determine what to render.\n\n`\u003cShow\u003e` has a `when` property that is used to determine whether or not to render its children.\nWhen there is a change in the state or props it depends on, this property is re-evaluated.\nThis property can be a boolean value, or a function that returns a boolean value.\n\n```jsx\nimport { Show } from \"solid-js\"\n\n\u003cShow when={data.loading}\u003e\n  \u003cdiv\u003eLoading...\u003c/div\u003e\n\u003c/Show\u003e\n```\n\n`\u003cShow\u003e` has the `fallback` property that can be used to specify the content to be rendered when the condition evaluates to false.\nThis property can return a JSX element.\n\n```jsx\nimport { Show } from \"solid-js\"\n\n\u003cShow when={!data.loading} fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e\n\t\u003ch1\u003eHi, I am {data().name}.\u003c/h1\u003e\n\u003c/Show\u003e\n```\n\nIf there are multiple conditions that need to be handled, `\u003cShow\u003e` can be nested to handle each condition.\n\n```jsx\nimport { Show } from \"solid-js\"\n\n\u003cShow when={data.loading}\u003e\n  \u003cdiv\u003eLoading...\u003c/div\u003e\n  \u003cShow when={data.error}\u003e\n    \u003cdiv\u003eError: {data.error}\u003c/div\u003e\n  \u003c/Show\u003e\n\u003c/Show\u003e\n```\n\n## Switch and Match\n\nWhen there are multiple conditions that need to be handled, it can be difficult to manage the logic flow with nested `\u003cShow\u003e` components.\nSolid has the `\u003cSwitch\u003e` and `\u003cMatch\u003e` components for this purpose.\n\nSimilar to JavaScript's [switch/case](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch) structure, `\u003cSwitch\u003e` wraps multiple `\u003cMatch\u003e` components so that each condition is evaluated _in sequence_.\nThe first `\u003cMatch\u003e` component that evaluates to true will have its children rendered, and the rest will be ignored.\n\n```jsx\nimport { Switch, Match } from \"solid-js\"\n\n\u003cSwitch\u003e\n  \u003cMatch when={condition1}\u003e\n    \u003cp\u003eOutcome 1\u003c/p\u003e\n  \u003c/Match\u003e\n  \u003cMatch when={condition2}\u003e\n    \u003cp\u003eOutcome 2\u003c/p\u003e\n  \u003c/Match\u003e\n\u003c/Switch\u003e\n```\n\nSimilar to `\u003cShow\u003e`, each `\u003cMatch\u003e` component has a `when` property that is used to determine whether or not to render its children.\nAn optional `fallback` property can also be passed to `\u003cSwitch\u003e` to specify the content be rendered when none of the `\u003cMatch\u003e` components evaluate to true.\n\n```jsx\nimport { Switch, Match } from \"solid-js\"\n\n\u003cSwitch fallback={\u003cp\u003eFallback content\u003c/p\u003e}\u003e\n\t\u003cMatch when={condition1}\u003e\n\t\t\u003cp\u003eOutcome 1\u003c/p\u003e\n\t\u003c/Match\u003e\n\t\u003cMatch when={condition2}\u003e\n\t\t\u003cp\u003eOutcome 2\u003c/p\u003e\n\t\u003c/Match\u003e\n\u003c/Switch\u003e\n```",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/control-flow/conditional-rendering.mdx",
  "metadata": {
    "path": "src/routes/concepts/control-flow/conditional-rendering.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 3300,
    "source_type": "github"
  },
  "hash": "46d373526c6e98deed65f13650a19c7e64d7562875e134e5053e5e358b0eaf91",
  "timestamp": "2026-02-23T11:43:00.186515604+01:00"
}