{
  "id": "4f77e7b1cddcae111174e945",
  "source": "solid:signals",
  "type": "github-document",
  "title": "show",
  "content": "---\ntitle: \u003cShow\u003e\norder: 5\nuse_cases: \u003e-\n  conditional rendering, toggling ui, feature flags, loading states, user\n  permissions, responsive design\ntags:\n  - conditional\n  - rendering\n  - components\n  - control-flow\n  - ui\n  - toggle\nversion: '1.0'\ndescription: \u003e-\n  Conditionally render UI elements in SolidJS with Show component. Display\n  content based on truthy conditions with optional fallback support.\n---\n\nThe `\u003cShow\u003e` component is used for conditionally rendering UI elements.\nIt takes a `when` prop that defines the condition for rendering.\nWhen the `when` prop is truthy, the children of the `\u003cShow\u003e` component are displayed.\nAdditionally, an optional `fallback` prop can be provided to specify an element that is shown when the condition is falsy.\n\n```tsx\nimport { createSignal, Show } from \"solid-js\";\n\nfunction Example() {\n\tconst [value, setValue] = createSignal(true);\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cbutton onClick={() =\u003e setValue((prev) =\u003e !prev)}\u003eToggle Show\u003c/button\u003e\n\t\t\t\u003cShow when={value()} fallback={\u003cdiv\u003eFallback Element\u003c/div\u003e}\u003e\n\t\t\t\t\u003cdiv\u003eChild Element\u003c/div\u003e\n\t\t\t\u003c/Show\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n## Keyed rendering\n\nWhen the `keyed` is set to `true`, any change to the `when` prop — including changes in its reference — will cause the `\u003cShow\u003e` component to re-render its children.\n\n```tsx\nimport { createSignal, Show } from \"solid-js\";\n\nfunction KeyedExample() {\n\tconst [user, setUser] = createSignal({ name: \"John Wick\" });\n\n\tfunction update() {\n\t\t// This operation changes the reference of the user object.\n\t\tsetUser({ ...user() });\n\t}\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cbutton onClick={update}\u003eUpdate\u003c/button\u003e\n\t\t\t\u003cShow when={user()} keyed\u003e\n\t\t\t\t\u003cp\u003eName: {user().name}\u003c/p\u003e\n\t\t\t\t{/* Updates shown with each click */}\n\t\t\t\t\u003cp\u003eLast updated: {Date.now()}\u003c/p\u003e\n\t\t\t\u003c/Show\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n## Render function\n\nThe `\u003cShow\u003e` component can also accept a render function as its child.\nIn this case, the first argument of the render function is an _accessor_ to the `when` prop.\nHowever, when the `keyed` prop is set to `true`, the argument is the `when` prop itself instead of an accessor.\n\nWhen a render function is used, it is internally wrapped with [`untrack`](/reference/reactive-utilities/untrack).\nAs a result, signals accessed directly within the render function's scope will not react to updates.\n\nFor example, in the following code, the count displayed in the first `\u003cShow\u003e` component does not update when the `count` signal changes.\nHowever, the second `\u003cShow\u003e` component does update since the `count` signal is accessed within a JSX element, which creates a tracking scope.\n\n```tsx\nimport { createSignal, Show } from \"solid-js\";\n\nfunction RenderFunctionExample() {\n\tconst [count, setCount] = createSignal(0);\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cbutton onClick={() =\u003e setCount((c) =\u003e c + 1)}\u003eIncrement\u003c/button\u003e\n\t\t\t{/* This does not update. */}\n\t\t\t\u003cShow when={count()}\u003e{(c) =\u003e count()}\u003c/Show\u003e\n\t\t\t{/* This will update. */}\n\t\t\t\u003cShow when={count()}\u003e{(c) =\u003e \u003c\u003e{count()}\u003c/\u003e}\u003c/Show\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n## Props\n\n| Name       | Type                              | Description                                           |\n| :--------- | :-------------------------------- | :---------------------------------------------------- |\n| `when`     | `T \\| undefined \\| null \\| false` | The condition value.                                  |\n| `keyed`    | `boolean`                         | Whether to key the block to the value of when.        |\n| `fallback` | `JSX.Element`                     | The fallback to render when the `when` prop is falsy. |",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/components/show.mdx",
  "metadata": {
    "path": "src/routes/reference/components/show.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 3525,
    "source_type": "github"
  },
  "hash": "eaf2f57ca8376a593b19e5abcfabb5bbf39e561feb9200230682b76320b58146",
  "timestamp": "2026-02-23T11:43:00.189141089+01:00"
}