ChoiceGroup component in Office UI Fabric

The ChoiceGroup component, also known as a radio button, presents users with two or more mutually exclusive options. Users can select only one ChoiceGroup button in a group. Each option is represented by one ChoiceGroup button.

Example: ChoiceGroup in a task pane

An image showing a ChoiceGroup

Best practices

Do Don't
Keep ChoiceGroup options at the same level.

Do ChoiceGroup example
Don't use nested ChoiceGroups or check boxes.

Don't ChoiceGroup example
Use ChoiceGroups with 2-7 options, ensuring there is enough screen space to show all options. Otherwise, use a check box or drop-down list. Don't use when the options are numbers with a fixed step, for example 10, 20, 30, and so on. Instead, use a slider component.
If users may not choose any of the options, consider including an option such as None or Does not apply. Don’t use two ChoiceGroup buttons for a single binary choice.
If possible, align ChoiceGroup buttons vertically instead of horizontally. Horizontal alignment is harder to read and localize.
List options in logical order, for example, the most likely option to be selected to the least, the simplest operation to the most complex, or the least risk to the highest risk. Don't use alphabetical ordering because it is language dependent.


Variation Description Example
ChoiceGroups Use when imagery is not necessary for making a selection. ChoiceGroup variant image
ChoiceGroups using images Use when imagery is necessary for making a selection. ChoiceGroup variant with image


For details, see ChoiceGroup and Getting started with Fabric React code sample.

Additional resources