# How to create interdependent widgets in Pluto

**URL:** https://discourse.julialang.org/t/how-to-create-interdependent-widgets-in-pluto/127774
**Category:** General Usage
**Tags:** question, pluto, plutoui
**Created:** [April 6, 2025, 10:14pm UTC](https://discourse.julialang.org/t/how-to-create-interdependent-widgets-in-pluto/127774 "2025-04-06T22:14:44Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Christopher\_Fisher](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/christopher_fisher/32/26132_2.png) [@Christopher\_Fisher](https://discourse.julialang.org/u/Christopher_Fisher)
#### Post date: [April 6, 2025, 10:14pm UTC](https://discourse.julialang.org/t/how-to-create-interdependent-widgets-in-pluto/127774/1 "2025-04-06T22:14:44Z")

</div>

Hello,

I am trying to make interdependent widgets based on the [wind speeds example](https://plutojl.org/en/docs/advanced-widgets/). Here is what I am trying to do: select a distribution from a Select menu and add a labeled `NumberField` to the right for each parameter. For example:

x: [normal] μ: σ:

where [normal] is the selection of the normal distribution from the `Select` menu, and each , is a `NumberField` for the parameters of the normal distribution. Here is what I tried, but I have no idea how to fix it. Any help would be greatly appreciated.

> **Summary**
>
> ```julia
> begin
> using PlutoUI
> import HypertextLiteral: @htl
> using Distributions
> function make_dists(var_names, options)
> PlutoUI.combine() do Child
> @htl("""
> <h6>Parameters</h6>
> <ul>
> $([
> @htl("<li>$(var_names[i]): $(Child(var_names[i], Select(options[i]))) $(p): $(Child(p, NumberField(0:100))) for p in fieldnames(typeof(options[i])) </li>")
> for i in 1:length(var_names)
> ])
> </ul>
> """)
> end
> end
> 	
> options = [[Normal => "normal", Gamma => "gamma"], [Normal => "normal", LogNormal => "LogNormal"]]
> var_names = ["x", "y"]
> @bind dists make_dists(var_names, options)
> end
> 
> ```

---

<div class="post-metadata">

### Author: ![Christopher\_Fisher](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/christopher_fisher/32/26132_2.png) [@Christopher\_Fisher](https://discourse.julialang.org/u/Christopher_Fisher)
#### Post date: [April 11, 2025, 11:54am UTC](https://discourse.julialang.org/t/how-to-create-interdependent-widgets-in-pluto/127774/2 "2025-04-11T11:54:30Z")

</div>

I have tried various approaches, but with no success. The main problem I am having is capturing the selected distribution and populating the labels and number fields for the parameters. In the code below, I break down the distribution menus and parameter number fields into separate functions, but I am not sure how to combine it so I can get something like:

x: [normal] μ: σ:   
y: [gamma] α: θ:

> **Summary**
>
> ```julia
> begin
> using Distributions
> using PlutoUI
> using HypertextLiteral: @htl
> end
> 
> function make_dist_widgets(dist_menus, names)
> PlutoUI.combine() do Child
> @htl("""
> <h6>Variables</h6>
> <ul>
> $([
> @htl("<li>$(names[i]): $(Child(names[i], Select(dist_menus[i])))</li>")
> for i in 1:length(dist_menus)
> ])
> </ul>
> """)
> end
> end
> 
> function make_parm_fields(dist)
> PlutoUI.combine() do Child
> @htl("""
> <ul>
> $([
> @htl("$(name): $(Child(name, NumberField(1:100)))")
> for name in fieldnames(dist)
> ])
> </ul>
> """)
> end
> end
> 
> # make number fields for distribution parameters
> @bind parms make_parm_fields(Normal)
> 
> # make a distribution menu for each variable
> begin
> dist_menus = [[Normal,Gamma],[LogNormal,Normal]]
> names = ["X", "Y"]
> @bind vars make_dist_widgets(dist_menus, names)
> end
> 
> ```

---

<div class="post-metadata">

### Author: ![Christopher\_Fisher](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/christopher_fisher/32/26132_2.png) [@Christopher\_Fisher](https://discourse.julialang.org/u/Christopher_Fisher)
#### Post date: [April 13, 2025, 2:56pm UTC](https://discourse.julialang.org/t/how-to-create-interdependent-widgets-in-pluto/127774/3 "2025-04-13T14:56:53Z")

</div>

Here is my latest attempt to create interdependent widgets. As you can see, the widget displays correctly, but the number fields do not update based on the menu selection. Moreover, I am not sure how to combine the number field inputs into the distribution object.

![Screenshot from 2025-04-13 10-52-11](https://global.discourse-cdn.com/julialang/original/3X/a/3/a3c72d7c88636d75db59380e860d1a412c30b43e.png)

> **Summary**
>
> ```julia
> begin
> using Distributions
> using PlutoUI
> using HypertextLiteral: @htl
> 
> function make_parm_fields(dist)
> PlutoUI.combine() do Child
> @htl("""
> <div style="display:flex; column-gap: 10px; flex-direction: row; justify-content: left">
> $([
> @htl("$(name): $(Child(name, NumberField(1:100)))")
> for name in fieldnames(dist)
> ])
> </div>
> """)
> end
> end
> 
> function my_widget(name, dists)
> return @htl("""
> <div style="display:flex; column-gap: 10px; flex-direction: row; justify-content: left">
> $(name): $(@bind dist Select(dists)) $(make_parm_fields(dist))
> </div>""")
> end
> 
> @bind results my_widget("x",[Normal,Gamma])
> 
> ```