# Switch and Match

Source: https://signy.dev/documentation/1/templates/switch-and-match/

One of several branches.

`Switch` takes `Match` children and renders the first one whose `when` is truthy. The fallback renders when none match.

```js
const { Component, Signal, application, html, Switch, Match } = Signy;

class Upload extends Component {
  status = new Signal("idle");

  render() {
    return html`
      <div class="cluster">
        <button class="small" onClick=${() => (this.status.value = "loading")}>Loading</button>
        <button class="small" onClick=${() => (this.status.value = "done")}>Done</button>
        <button class="small" onClick=${() => (this.status.value = "error")}>Error</button>
      </div>
      ${Switch({
        fallback: html`<p>Idle</p>`,
        children: [
          Match({ when: () => this.status.value === "loading", children: () => html`<p aria-busy="true">Uploading</p>` }),
          Match({ when: () => this.status.value === "done", children: () => html`<p class="alert success">Uploaded</p>` }),
          Match({ when: () => this.status.value === "error", children: () => html`<p class="alert danger">Upload failed</p>` }),
        ],
      })}
    `;
  }
}

application(Upload).mount("#switch-status");
```

Like `Show`, a function in `children` receives the truthy value of `when`.