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
Best Practices
| Do | Don't |
|---|---|
| Keep ChoiceGroup options at the same level. | Don't use nested ChoiceGroups or CheckBoxes. |
 |
 |
| Use ChoiceGroups with 2-7 options, ensuring there is enough screen space to show all options. Otherwise, use a Checkbox or Dropdown. | 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 like "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, most likely option to be selected to least, simplest operation to most complex, or least risk to high risk. Alphabetical ordering is not recommended because it is language dependent. |
Variants
| Variation | Description | Example |
|---|---|---|
| ChoiceGroups | Use when imagery is not necessary for making a selection. |  |
| ChoiceGroups using images | Use when imagery is necessary for making a selection. |  |
Implementation
For details, see ChoiceGroup and Getting started with Fabric React code sample.