Axure Tutorial: Common Widgets - Radio Button


This article is a part of course Axure Full Course: Tutorial, Tips and Templates.

Similar to droplist, Radio buttons are used to select one of several options. Which widget to use depends on the usage scenario.

Radio Size and Label Alignment

In the Style pane on the right, you can edit the size of the Radio and the alignment of the label.


Radio Buttons Selection 

Assign Radio Button Group

If you want to select only one of multiple Radio Buttons, you need to assign Selection Group to them, different Selections are mutually exclusive.

Select all Radio buttons, right-click to select Assign Radio Group, and enter the Group Name in the pop-up window to assign a Selection Group to them.

Note: If a Radio button is selected in browser, it cannot be unselected by clicking it again, it can only be unselected by clicking another radio button in the selection group.

Select/Unselect/Toggle a Radio Button 

In the browser, there are two ways to select a Radio Button:

1. If a Radio button is not selected, click it to select it.

2. Select/unselected/toggle it by action.

Select a radio button by action

Other Interaction Properties

Submit Button
If the submit button is specified, when the droplist gets focus, pressing the Enter key will trigger the interaction set by the Submit button. This is often used for form submissions.

That's all for today's lesson.In the following lessons we will continue to introduce commonly used widgets.

If you have any questions and suggestions, please leave a message.

If you like the article, please share it with others with page link, thanks for your supporting! ❤

Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design. 

Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.