Components (JSX)

Show

Conditionally renders its children when when is truthy, otherwise renders the optional fallback.

The function-child form receives a narrowed value. Without keyed (default), it receives an accessor and the child is preserved across truthy values; with keyed, it receives the raw value and remounts whenever the value's identity changes.

Import

import { Show } from "solid-js";

Type signature

function Show<T>(props: {
  when: T | undefined | null | false;
  keyed: true;
  fallback?: SolidElement;
  children: SolidElement;
}): SolidElement;
function Show<T, F extends KeyedConditionalRenderCallback<T>>(props: {
  when: T | undefined | null | false;
  keyed: true;
  fallback?: SolidElement;
  children: NonZeroParams<F>;
}): SolidElement;
function Show<T>(props: {
  when: T | undefined | null | false;
  keyed?: false;
  fallback?: SolidElement;
  children: SolidElement;
}): SolidElement;
function Show<T, F extends ConditionalRenderCallback<T>>(props: {
  when: T | undefined | null | false;
  keyed?: false;
  fallback?: SolidElement;
  children: NonZeroParams<F>;
}): SolidElement;

Examples

<Show when={user()} fallback={<SignIn />}>
  {(u) => <Greeting name={u().name} />}
</Show>

Last updated: 7/4/26, 6:21 PMEdit this pageReport an issue with this page