# if

The **sonic-if** component shows its content based on the value of its reactive property names **condition**

<sonic-code>
  <template>
<div dataProvider="visibilitySettings" formDataProvider="visibilitySettings">
  <sonic-checkbox label="Show evacuation plan" name="togglePlan" unique checked value="true"></sonic-checkbox>
  <sonic-if  data-bind ::condition="$togglePlan" class="mt-4 block">
  <sonic-image src="https://www.thebaron.info/assets/mail/concorde-evacuation.jpg" rounded="md" ratio="654/463"></sonic-image>
  </sonic-if>
</div>
  </template>
</sonic-code>