In this blog, we will learn how to integrate an Office UI Fabric ChoiceGroup control in the SharePoint Framework (SPFx).

The ChoiceGroup component, also known as radio buttons, lets users select one option from two or more choices. Each option is represented by one ChoiceGroup button; a user can select only one ChoiceGroup in a button group. The below steps explain how to integrate choice group control in your SPFx solution, and how to store values to state variable on change.
Steps Involved
Install “office-ui-fabric-react” from the node package manager as shown below.

Import “office-ui-fabric-react” to your .tsx file as shown below.

In this blog, I have used class file (ProjectTaskConstants.ts) to hold all the values to be populated in choice group as shown below


Import ProjectTaskContants.ts file to your .tsx file as shown below

Instantiate the class file as shown below:

In Render method, use the control as shown below:

OnChange event:

In the above example, I have used “Status” state variable of type string.
To disable the choice group: