Recently I was working on application where I need to show/hide property pane component based on another component’s value in SPFx. I want to make it conditional. I have implemented this and thought to write a blog on same which can help who want to implement this functionality.
So In this article we will see how to Show/hide component based on another component’s value:
Scenario:
We will create SPFx webpart. In this webpart, We will add a toggle button. On the selection of the toggle button, we want show or hide the radio button group. Radio button group have two radio button choices : Text and Image, If I select Text then it should show text of that input and if I select image than it should show image of that input URL.

So Let’s start with creating SPFx Webpart.
To create SPFx webpart , refer below link:
https://sharepointcorner.tech/spfx-development-step-by-step
We will create No JavaScript Framework Webpart.
Move to the file [webpartName]WebPart.ts
file
- We will import required property pane controls
import { IPropertyPaneConfiguration, PropertyPaneChoiceGroup, PropertyPaneToggle, PropertyPaneTextField } from '@microsoft/sp-property-pane';
- Declare properties in the generated interface
I[webpartName]WebPartProps
export interface ICPPWebPartProps { simpleText: string; textOrImageType: string; imageUrl: string; enableToggle: boolean; }
- Now we will create Toggle Button
groups: [ { groupName: strings.BasicGroupName, groupFields: [ PropertyPaneToggle('enableToggle', { key: 'Enable Toggle', label: 'Enable Toggle', checked: true }), ] } ]
- Now we will create controls (Radio button and Text Input) based on condition
- First, we will declare variables in getPropertyPaneConfiguration method
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { //create a variable for choice control let textOrImageType: any = []; //create a variable for image control let imageSourceControl: any = []; //create a variable for text control let simpleTextControl: any = []; }
-
Now we will show/hide controls based on conditions. this code will be after the above declarations.
if (this.properties.enableToggle) { textOrImageType = PropertyPaneChoiceGroup('textOrImageType', { label: 'Image/Text', options: [{ key: 'Text', text: 'Text', checked: true }, { key: 'Image', text: 'Image', } ] }); if (this.properties.textOrImageType === "Text") { simpleTextControl = PropertyPaneTextField('simpleText', { label: "Text", placeholder: "Enter Text" }); } else { imageSourceControl = PropertyPaneTextField('imageUrl', { label: "Image URL", placeholder: "Enter Image URL" }); } }
-
Now we will use above declared variables in return statement after the toggle button declaration.
return { pages: [ { header: { description: strings.PropertyPaneDescription }, groups: [ { groupName: strings.BasicGroupName, groupFields: [ PropertyPaneToggle('enableToggle', { key: 'Enable Toggle', label: 'Enable Toggle', checked: true }), textOrImageType, simpleTextControl, imageSourceControl ] } ] } ] };
- First, we will declare variables in getPropertyPaneConfiguration method
-
- Now we will update render method as below code.
public render(): void { let renderHtml = `<div> <div><b>Enable Toggle:</b> ${this.properties.enableToggle}</div>`; if (this.properties.enableToggle) { renderHtml += `<div><b>Link Type:</b> ${this.properties.textOrImageType}</div>`; if (this.properties.textOrImageType != undefined) { if (this.properties.textOrImageType === "Text") { renderHtml += `<div><b>Text:</b> ${this.properties.simpleText}</div>`; } if (this.properties.textOrImageType === "Image") { renderHtml += `<div><img src =${this.properties.imageUrl} height="150" width="150" alt="Image"</div>`; } } } renderHtml += `</div></div></div></div>`; this.domElement.innerHTML = renderHtml; }
- Now we will update render method as below code.
GitHub Repository
https://github.com/chandaniprajapati/spfx-custom-property-pane
If you like this project, mark a ⭐ on GitHub Repository
Output

Sharing is Caring.
Happy Coding 🙂
great, thanks for example
Thanks for your valuable feedback.
Exactly what I was looking for! Thanks for much for the great content and a link to the code!!
Happy to help you 🙂