When creating a selection control, the
type are required to render the control. It is
recommended to always supply a
value and either a
aria-label as well.
SelectionControl component is probably all that you will need, but there are simple wrappers for the
Switch components so that you don't need to specify a
Since the radios need to be controlled to toggle the icons, there is a helper component
SelectionControlGroup that will help keep the selected state for you. This component
will also add keyboard functionality so that it matches the native
The user will only be able to tab-focus the selected radio button. If the user presses tab again,
it will select the next focusable element on the page. To select different values, the user can
press the up or left arrow keys to select the previous radio button and the down or right arrow
keys to select the next button. Just like the native
<input type="radio"> elements, the selection
will immediately select the radio, trigger the
onChange event, and loop around.
If the default
SelectionControl component does not work with your needs, it is possible to provide a custom
implementation to the
SelectionControlGroup component. This example will not go into a lot of details, but you
can check out the controlComponent prop for all the
props that are provided.
By default, the
Radio components will use
FontIcon to display the checked/unchecked icons.
If you want to change the displayed icon, you can use the
uncheckedIcon props on the
or provide the correct
SelectionControlGroup has also been updated to apply these icons across the entire
controls list. It is possible
to update the icon either at the
SelectionControlGroup level or the
control level by applying the correct props. Check
out the code and the following example to see how it in action.
This example also shows how you can easily make lists of checkboxes with the
SelectionControlGroupcomponent as well. It is not limited to only rendering radios.