I want to set dependency in UI form.

For ex : When I select first drop-down value then only display second drop-down.

How to do this ?


You should have two dropdown in ui form like this :

<field name="dropdown1">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">VendorName\ModuleName\Model\Config\Source\Options</item>
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Dropdown 1</item>
            <item name="component" xsi:type="string">VendorName_ModuleName/js/form/element/options</item>
            <item name="visible" xsi:type="boolean">true</item>
            <item name="dataType" xsi:type="string">number</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="source" xsi:type="string">item</item>
            <item name="dataScope" xsi:type="string">dropdown1</item>
            <item name="sortOrder" xsi:type="number">100</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>

<field name="dropdown2">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Dropdown 2</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="source" xsi:type="string">item</item>
            <item name="sortOrder" xsi:type="number">110</item>
            <item name="breakLine" xsi:type="boolean">true</item>
            <item name="visibleValue" xsi:type="string">DE</item>
            <item name="visible" xsi:type="boolean">false</item>


Above code, Which is parent dropdown, that's only visible value true. Child dropdown's value should be false.

Now, create your options file :


namespace VendorName\ModuleName\Model\Config\Source;

use Magento\Framework\Option\ArrayInterface;

class Options implements ArrayInterface
     * @return array
    public function toOptionArray()
        $options = [
            0 => [
                'label' => 'India',
                'value' => 'IN'
            1 => [
                'label' => 'Germany',
                'value' => 'DE'

        return $options;

Now, create js for dependency :


], function (_, uiRegistry, select, modal) {
    'use strict';

    return select.extend({

         * On value change handler.
         * @param {String} value
        onUpdate: function (value) {
            console.log(value); // For display selected value

            var field1 = uiRegistry.get('index = dropdown2');
            if (field1.visibleValue == value) {
            } else {
            return this._super();

Cheers :)

  • 1
    He'd be better off with an "imports" node. – Shawn Abramson Mar 27 at 4:08
  • How can i hide fieldset instead of a field? – Chirag Patel Jul 26 at 5:40
  • Sorry. I didn't do that. Need to do testing on that. – Rohan Hapani Jul 26 at 5:42
  • 1
    Okay, nop let me know if you found something Thanks:) – Chirag Patel Jul 26 at 5:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.