Conditional Form

Conditional / dynamic form component where fields appear/disappear based on user input.

Basic Usage

User type


<.conditional_form id="dynamic-form">
  <:field name="user_type" type="select" options={["individual", "business"]} />
  <:conditional_field show_if={%{"user_type" => "business"}}>
    <div class="mb-4">
      <label for="company_name-input">Company Name</label>
      <input type="text" id="company_name-input" name="company_name" />
    </div>
  </:conditional_field>
</.conditional_form>

Subscription Upgrades

Guided Upsell

Unlock tailored add-ons once a plan tier is selected. Annual billing surfaces an incentive banner automatically.

Perfect for pricing pages, upgrade modals, and checkout flows with progressive disclosure.

Plan tier

Billing cadence

Notification Preferences

Send product updates

Priority channel

Why it works

Checkbox toggles persist values as booleans, so show_if: %{"send_updates" => true} unlocks cadence controls instantly.

Passing a list into show_if supports multi-value branches without extra hooks. Here, both SMS and Push reveal device verification.

The hook listens to the entire form, so you can mix and match select, checkbox, and text inputs for progressive guidance.