In addition to these improvements, the default visual layout of individual radio buttons in a RadioButtons group has been optimized through automated orientation, spacing, and margin settings. These improvements help both accessibility and keyboard power users move through the list of options more quickly and easily. Keyboard access and navigation behavior have been optimized in the RadioButtons control. You can use groups of individual RadioButton controls.This control simplifies layout, handles keyboard navigation and accessibility, and supports binding to a data source. We recommend the RadioButtons control.There are two ways to create radio button groups: RadioButtons and RadioButton. RadioButtons overview RadioButtons vs RadioButton When two RadioButtons groups are right next to each other, it can be difficult for users to determine which buttons belong to which group. Don't put two RadioButtons groups side by side.Use the default font unless your brand guidelines tell you otherwise.If the text label is dynamic, consider how the button will automatically resize and what will happen to any visuals around it.Limit the radio button's text label to a single line.Make sure that the purpose and current state of a set of radio buttons is explicit.If the available options are based on an app's current context, or they can otherwise vary dynamically, use a list control. If there are more than eight options, use a combo box. When users' options lie within a range of values (for example, 10, 20, 30. When users can select multiple options, use check boxes. For example, use a single check box for "I agree" instead of two radio buttons for "I agree" and "I don't agree."ĭon't use two radio buttons for a single binary choice: If there are only two possible options that can be expressed clearly as a single binary choice, such as on/off or yes/no, combine them into a single check box or toggle switch control. For example, to recommend a single best option for most users and in most situations, use a combo box to display that best option as the default option. Unless all options deserve equal attention, consider using other controls. Radio buttons emphasize all options equally, which means that some options might draw more attention than is necessary or desired. Use radio buttons when users need to see all options before they make a selection. Use radio buttons to let users select from two or more mutually exclusive options. The singular behavior of a RadioButtons group distinguishes it from check boxes, which support multi-selection and deselection, or clearing. However, once a user has selected a radio button, the user can't deselect the button to restore the group to its initial cleared state. In the default state, no radio button in a RadioButtons group is selected. Radio buttons are always used in groups, and each option is represented by one radio button in the group. Radio buttons, also called option buttons, let users select one option from a collection of two or more mutually exclusive, but related, options.