Idiomatic LiveView dynamic/nested forms

I’m starting to build a multi-step/page ‘wizard’ form, but from these forums and web tutorials, struggling to find the idiomatic way to build a dynamic form.

The simplest use case is:

  1. User clicks or presses Enter to choose an option from a select,
  2. Depending on the option another form element is displayed eg another select or radio buttons or a text field.
  3. Some steps/pages will have forms that have 3-5 elements, each depending on the previous one.

I know this is one of the most basic use cases for LiveView, but I’m struggling to find a simple example.

Can anyone please point to one in these forums or in an online tutorial or put an example up below?


Here are some links that might be helpful:


Thanks, that second link is good. I’ve tried to understand the first one, but it’s broken up in a way that I find confusing.

If anyone has a simple example of dynamic/nested elements within a form, I’m still keen to see it.

Bumping this in regards to Phoenix Liveview 0.16.1

Anyone have any code they can share with a very simple example of the use case I have outlined in my original post here?


The good news is that there is very little to do to update my older blog post mentioned above to 0.16.1:

And making the update further cleans up the code a bit (:blush:).

You can follow the changelog guide and reference the live view docs as well. After the update, you can totally get rid of the templates/person_registration and just render it all in your live view with that wonderful ~H.

Here’s a new updated post with the changes:

Hope it helps :heart: