Conditional Rendering

Elements can be included or excluded from the interface based on component state. A condition is a bound name — a bool member or a const method returning bool — interpolated with {...}. An element renders when the value is true (or 1).

Templates do not evaluate expressions: comparisons such as {status == "loading"} are not supported. Put the comparison in a computed method and bind that instead:

class Profile : public rtxui::Component<Profile> {
 public:
  std::string status = "loading";

  bool is_loading() const { return status == "loading"; }
  bool is_error() const { return status == "error"; }

  Profile() {
    Bind(status);
    Bind(is_loading);
    Bind(is_error);
  }
  // ...
};

The <if> / <elif> / <else> chain

For block-level branching, wrap the alternatives in consecutive logic tags. The chain renders the first branch whose condition holds; formatting whitespace and comments between the tags do not break the chain.

<if condition="{is_loading}">
  <progress value="50" />
</if>
<elif condition="{is_error}">
  <span class="text-error">Failed to fetch profile details.</span>
</elif>
<else>
  <span>Profile loaded.</span>
</else>

The if attribute

To toggle a single element without a wrapper tag, put an if attribute on the element itself. When the condition is false the element is not constructed at all — it has no layout size and receives no events.

<span if="{is_admin}">Delete profile</span>

Choosing between them

• Use the if attribute for a single optional element.
• Use <if>/<elif>/<else> when branches are alternatives to each other, or when a branch contains several elements.
• To keep an element's space in the layout while hiding it, use CSS visibility: hidden instead; to remove its space without removing it from the DOM, toggle a class that sets display: none.

Demo

Fullscreen Demo

// Copyright 2026 Arthur Sonzogni. All rights reserved.
// Use of this source code is governed by the MIT license that can be found in
// the LICENSE file.
//
// Conditional rendering.
//
// <if condition="{computed}"> includes its children only when the bound value
// is true; the `if` attribute does the same inline on any element.
//
// Try it: pick a status to swap the rendered branch.
#include <rtxui/rtxui.hpp>
#include <string>
#include <string_view>

using namespace rtxui;

class ConditionalApp : public Component<ConditionalApp> {
 public:
  std::string status = "loading";

  bool is_loading() const { return status == "loading"; }
  bool is_error() const { return status == "error"; }

  void Set(std::string value) { status = value; }

  std::string_view view = R"html(
      <div class="card">
        <h1>Conditional rendering</h1>
        <p>An &lt;if&gt; / &lt;elif&gt; / &lt;else&gt; chain renders its first true branch.</p>

        <div class="buttons">
          <button onclick="Set(loading)">Loading</button>
          <button onclick="Set(error)">Error</button>
          <button onclick="Set(done)">Done</button>
        </div>

        <div class="result">
          <if condition="{is_loading}">
            <span class="loading">Fetching the profile...</span>
          </if>
          <elif condition="{is_error}">
            <span class="error">The profile could not be fetched.</span>
          </elif>
          <else>
            <span class="done">Profile loaded.</span>
          </else>
        </div>

        <div if="{is_error}" class="hint">The if attribute shows a single element, like this hint.</div>
      </div>

      <style>
        self {
          --border: rgb(48, 54, 61);
          --muted: rgb(139, 148, 158);
          --accent: rgb(88, 166, 255);

          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          color: rgb(230, 237, 243);
        }
        .card {
          border: tall;
          border-color: var(--border);
          background-color: rgb(22, 27, 34);
          padding: 1 3;
          width: 56;
        }
        h1 {
          color: var(--accent);
        }
        p {
          color: var(--muted);
        }
        .buttons {
          display: flex;
          gap: 2;
        }
        button {
          border: tall;
          border-color: var(--border);
          background-color: rgb(13, 17, 23);
          padding: 0 1;
        }
        button:hover, button:focus {
          border-color: var(--accent);
          color: var(--accent);
        }
        .result {
          border: round;
          border-color: var(--border);
          padding: 0 1;
          margin-top: 1;
        }
        .loading {
          color: rgb(210, 153, 34);
        }
        .error {
          color: rgb(248, 81, 73);
        }
        .done {
          color: rgb(63, 185, 80);
        }
        .hint {
          margin-top: 1;
          color: var(--muted);
        }
      </style>
    )html";

  ConditionalApp() {
    Bind(status);
    Bind(is_loading);
    Bind(is_error);
    Bind(Set);
  }
};

int main() {
  auto app = Ref<ConditionalApp>::New();
  Screen screen(app);
  screen.Loop();
  return 0;
}