Concorde functional component — If. sonic-if renders its default slot only while condition is true. Use it to show or hide a block from reactive state; with no condition, the content is not rendered. The host uses display: contents, so Doc ID: core/components/functional/if/if. Keywords: Concorde, supersoniks, core/components/functional/if/if, if, If, functional component, sonic-if, web component, condition, display: contents, condition="false", .condition, @subscribe, formDataProvider. URL: https://concorde.supersoniks.org/core/components/functional/if.

If

sonic-if renders its default slot only while condition is true. Use it to show or hide a block from reactive state; with no condition, the content is not rendered. The host uses display: contents, so it adds no box to the layout.

Basic example

<sonic-if condition>
      <sonic-badge type="success">CN 001 · Boarding</sonic-badge>
    </sonic-if>
    <sonic-if>
      <sonic-badge type="danger">Never rendered</sonic-badge>
    </sonic-if>

condition is a boolean attribute: any value, even condition="false", counts as true. To toggle it, remove the attribute or bind the property.

Reactive condition

In Lit, bind .condition to state read with @subscribe. Here a checkbox writes to a formDataProvider and the component re-renders from it.

API reference