Match

A template primitive example.

Stage	Category	Version	Last Updated	Demo
3	Control Flow	1.0.0-next.2 (next)	Aug 13, 2026	Demo →

npm i @solid-primitives/match@next

Control-flow components for matching discriminated union (tagged union) members and union literals.

`MatchTag`

Control-flow component for matching discriminated union (tagged union) members.

How to use it

type MyUnion = {
  type: "foo",
  foo:  "foo-value",
} | {
  type: "bar",
  bar:  "bar-value",
}

const [value, setValue] = createSignal<MyUnion>({type: "foo", foo: "foo-value"})

<MatchTag on={value()} case={{
  foo: v => <>{v().foo}</>,
  bar: v => <>{v().bar}</>,
}} />

Changing the tag key

The default tag key is "type", but it can be changed with the tag prop:

type MyUnion =
  | {
      kind: "foo";
      foo: "foo-value";
    }
  | {
      kind: "bar";
      bar: "bar-value";
    };

<MatchTag
  on={value()}
  tag="kind"
  case={{
    foo: v => <>{v().foo}</>,
    bar: v => <>{v().bar}</>,
  }}
/>;

Partial matching

Use the partial prop to only handle some of the union members:

<MatchTag
  partial
  on={value()}
  case={{
    foo: v => <>{v().foo}</>,
    // bar case is not handled
  }}
/>

Note: partial is a TypeScript-only escape hatch — it switches the case mapped type from required to optional keys. It has no runtime effect; unmatched values fall through to fallback regardless of whether partial is set.

Fallback

Provide a fallback element when no match is found or the value is null/undefined:

<MatchTag
  on={value()}
  case={{
    foo: v => <>{v().foo}</>,
    bar: v => <>{v().bar}</>,
  }}
  fallback={<div>No match found</div>}
/>

`MatchValue`

Control-flow component for matching union literals.

How to use it

type MyUnion = "foo" | "bar";

const [value, setValue] = createSignal<MyUnion>("foo");

<MatchValue
  on={value()}
  case={{
    foo: () => <p>foo</p>,
    bar: () => <p>bar</p>,
  }}
/>;

Partial matching

Use the partial prop to only handle some of the union members:

<MatchValue
  partial
  on={value()}
  case={{
    foo: () => <p>foo</p>,
    // bar case is not handled
  }}
/>

Note: partial is a TypeScript-only escape hatch — it has no runtime effect. See MatchTag partial matching for details.

Fallback

Provide a fallback element when no match is found or the value is null/undefined:

<MatchValue
  on={value()}
  case={{
    foo: () => <p>foo</p>,
    bar: () => <p>bar</p>,
  }}
  fallback={<div>No match found</div>}
/>

`MatchField` (deprecated)

MatchField is an alias for MatchTag kept for backwards compatibility. Use MatchTag in new code.

Changelog

See CHANGELOG.md