# 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-code>
  <template>
    <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>
  </template>
</sonic-code>

`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.

<docs-lit-demo for="docs-toggle-if-demo"></docs-lit-demo>

## API reference

| Attribute | Values | Description |
|-----------|--------|-------------|
| `condition` | boolean (default `false`) | Renders the default slot when true |

| Slot | Description |
|------|-------------|
| *(default)* | Content rendered while `condition` is true |