Components (JSX)

Match / Switch

A branch inside a <Switch>. The first <Match> whose when is truthy wins; remaining matches are skipped.

Like <Show>, <Match> supports a function child. Non-keyed children receive an accessor for the narrowed value; keyed children receive the raw narrowed value.

Import

import { Match } from "solid-js";

Type signature

function Match<T>(props: {
  when: T | undefined | null | false;
  keyed: true;
  children: SolidElement;
}): SolidElement;
function Match<T, F extends KeyedConditionalRenderCallback<T>>(
  props: KeyedMatchProps<T, F>
): SolidElement;
function Match<T>(props: {
  when: T | undefined | null | false;
  keyed?: false;
  children: SolidElement;
}): SolidElement;
function Match<T, F extends ConditionalRenderCallback<T>>(
  props: MatchProps<T, F>
): SolidElement;
function Match<T>(props: AnyMatchProps<T>): SolidElement;

Examples

<Switch fallback={<NotFound />}>
  <Match when={user()}>{(u) => <Profile name={u().name} />}</Match>
  <Match when={loading()}>
    <Spinner />
  </Match>
</Switch>

Switches between content based on mutually exclusive conditions. Renders the first <Match> whose when is truthy; falls back to fallback when none match.

Import

import { Switch } from "solid-js";

Type signature

function Switch(props: {
  fallback?: SolidElement;
  children: SolidElement;
}): SolidElement;

Examples

<Switch fallback={<FourOhFour />}>
  <Match when={state.route === "home"}>
    <Home />
  </Match>
  <Match when={state.route === "settings"}>
    <Settings />
  </Match>
</Switch>

`AnyMatchProps`

type AnyMatchProps<T> =
  | MatchProps<T>
  | KeyedMatchProps<T>
  | {
      when: T | undefined | null | false;
      keyed?: boolean;
      children: SolidElement;
    };

`KeyedMatchProps`

type KeyedMatchProps<
  T,
  F extends KeyedConditionalRenderCallback<T> =
    KeyedConditionalRenderCallback<T>,
> = {
  when: T | undefined | null | false;
  keyed: true;
  children: KeyedConditionalRenderChildren<T, F>;
};

`when`

Type: T | undefined | null | false

`keyed`

Type: true

`children`

Type: KeyedConditionalRenderChildren<T, F>

`MatchProps`

type MatchProps<
  T,
  F extends ConditionalRenderCallback<T> = ConditionalRenderCallback<T>,
> = {
  when: T | undefined | null | false;
  keyed?: false;
  children: ConditionalRenderChildren<T, F>;
};

`when`

Type: T | undefined | null | false

`keyed`

Type: false

`children`

Type: ConditionalRenderChildren<T, F>

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