Hide/Disable property pane component based on another component's value

Question

On my property pane for a SPFx web part, I've got a Toggle and a Slider component.

How do make it so that when the Toggle is Off, the Slider is hidden/disabled?

Answer 1

You can make use of a standard boolean check to determine whether your toggle component has value. Based on that, you can show/hide your slider component. You can do this bool check in the getPropertyPaneConfiguration method itself as below. Here, if the toggle component is off, we will show an emptly label.

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    let allEventsUrl: any;

    if (this.properties.toggleAllEvents) {
      allEventsUrl = PropertyPaneSlider('maxEvents', {
        label: "Max events",
        min: 1,
        max: 10,
        value: 1,
        showValue: true,
        step: 1
      })
    }
    else {
      allEventsUrl = PropertyPaneLabel('emptyLabel', {
        text: ""
      });
    }
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneToggle('toggleAllEvents', {
                  key: 'toggleAllEvents',
                  label: '',
                  checked: false,
                  onText: "Some text",
                  offText: "Some other text",
                }),
                allEventsUrl
              ]
            }
          ]
        }
      ]
    };
  }

End result:

Image 1 - toggle off

Image 2 - toggle on

Answer 2

Thanks for the answer from @GautamSheth but I also thought outputting an empty PropertyPaneLabel is definitely not ideal as mentioned by @ColinGardner. However, I also don't think creating a new PropertyPaneControl that does nothing is a good idea either.

Here is how I am doing it, which I find to be much simpler and easier to understand for someone else looking at the code.

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    // configure groupFields to show always
    const conditionalGroupFields: IPropertyPaneGroup["groupFields"] = [
      PropertyPaneCheckbox("Field1", {
        text: strings.Field1Label,
      }),
    ];

    // show Field2, only if Field1 is true
    if (this.properties.Field1) {
      conditionalGroupFields.push(
        PropertyPaneCheckbox("Field2", {
          text: strings.Field2Label,
        }),
      );
    }
    return {
      pages: [
        {
          groups: [
            {
              groupFields: conditionalGroupFields,
              groupName: strings.ConditionalGroupFieldsLabel,
            },
          ],
          header: {
            description: strings.PropertyPaneDescription,
          },
        },
      ],
    };
  }