dependent inputs.md

A "dependent input" uses the value of a previous input to get its options.

For example, we have a block named "Get a City's Population". This block has a "Country" input, then a "City" input. When the "Country" input is changed, the "City" input will load new options. In this example, the "City" input is dependent on the "Country" input.

Example configuration for a dependent input:

// The "country" selector input
{
  label: "Country",
  name: "two_char_country_code",
  optional: false,
  type: text,
  options: {
    block: {...}
  }
},
// The "city" selector input. This is dependent on the "country" input.
{
  default: "",
  help_text: "Choose a city.",
  label: "City",
  name: "city",
  optional: false,
  type: "text",
  options: {
    block: {
      type: "block",
      id: "a-block-that-gets-a-list-of-cities-given-a-country-value",
      name_key: "name",
      param_deps: [
        {
          source_param: "two_char_country_code",
          block_param: "country_code"
        }
      ]
    }
  }
}

This configuration will render a dropdown input, since it is type "text" and has options.

This input depends on a previous input since it has options.block.param_deps, which is short for parameter dependencies.

The param_deps object works like this:

source_param specifices the name of the other form input to get a value from. In our example, this identifies the country_selector value. In HTML, this is the "name" of the input if you have <input type="text" name="two_char_country_code">.

block_param specifies what key to use when passing the value into the dependent block.

So in our example config, when a user types a value into the two_char_country_code input, we would call the block a-block-that-gets-a-list-of-cities-given-a-country-value with the value in two_char_country_code passed along as country_code.