Creating Nested Input Fields (w/

I’m looking for a bit of help with inputs. I would like to have additional options be ‘revealed’ depending on a selection. For example:

Would you like to see a new form?

  • yes
    • new forms are great
    • this is something i must do
  • no
    • i prefer old forms
    • i have no need for a new form

In the past, I’ve accomplished this sort of thing using Bootstrap and showing or hiding a div element (this approach is modeled in the linked notebook). I can manually encode questions and link values to particular behaviors, but I am a bit stuck when in comes to utilizing Observable inputs. Also, I’d love to learn how to do this without relying on JQuery and external CSS stylesheets.

Is the right tool? I haven’t quite gotten in working yet, but I assume I can start with whatever I want (including an empty div with ID and/or class name), and then conditionally .remove() the content [working] or .append() in the desired new form element [stuck here]. Am I on the right track?

Please also share if you have a notebook with ‘nested’ or dependent fields that are shown / hidden on selection that could sever as a template/example! :pray:

Hope you’re all safe, comfortable, and healthy!

Here’s one approach:

1 Like

Thanks @mbostock! This is very helpful indeed.

I will continue to play around to see whether I can make the non-active fields hidden. I haven’t had a chance to try it yet, but after raising my question I realized I can probably use an ‘if … else’ statement (or a logical operator, as you used here) to return one or another input group back into the div. I’ll keep playing and will post again here as I made progress. Certainly your notebooks solved the conditional aspect of this question!


… a couple more steps and options are rendered out according to selection AND (thanks to @mbostock) I can also return all selected values as a group. thanks again! :man_dancing:

1 Like

Thank you for this illustration. Is there a new method that supports this now? If not, I would like to know how to clear the secondary radio buttons upon click of primary cats/dogs selection, and how to wire up an event upon selection of the secondary radio button.

1 Like

It’s slightly different, but I recently learned how to listen to multiple filters:

When learning, I referenced this:

1 Like

Thank you - very interesting. Also, thank you for the reference to synchronized inputs – I will review that before asking any further questions. What would be nice is a “dropdown tree” feature to allow selectiing a node within a tree structure.

1 Like