Round up them radio buttons and group em up! You'll be togglin' in no time.
A radio button can be selected by default either by clicking the box in the wireframe, or right-clicking and selecting Edit Radio Button > Select Radio Button. This allows the radio button to be selected by default when the prototype is generated.
Radio buttons can be dynamically set using the action Set Widget/Variable Value(s) with the selection Is Checked of RadioButtonName equals true.
By default, the radio button is on the left and the associated text is on the right. You can change this alignment so that text is on the left by right-clicking the checkbox and selecting Edit Radio Button > Align Radio Button Right.
© 2002-2013 Axure Software Solutions, Inc. All rights reserved.
Use Axure RP as:
Back to Overview
The Round Up
Interactions can be added to radio buttons by using OnClick. Because radio buttons are often toggled in a group, you do not need to add more than one case or conditional logic like you do with checkboxes.
The radio button is most often used in form where a user is making one choice out of several options.
Often times the selection of a radio button will change an element on the next page. This is done by storing a variable value if the radio button is "true", or rather, is selected.
In this example, clicking the Submit Button sets the variable value based on which radio button is selected. On the next page, the associated panel state is dynamically shown using an OnPageLoad interaction.
Radio buttons are a fixed height and width. You can edit the text but cannot change the size or shape of the actual button.
By default, the radio button will be enabled when added to your wireframe. In some cases you may want to disable it by default. To do this, right-click the radio button and select Edit Radio Button > Set Disabled.
The checkbox can also be enabled and disabled in an interaction by using the Enable Widget(s) or Disable Widget(s) action in the case editor.
The radio button is often used to allow the user to make one selection out of a small group of choices. The selection made can trigger an interaction on that page or be stored in a variable value to be used on another page.
Toggle with a
Radio Button Widget
In a form
Editing Radio Buttons
Set selected by default or dynamically
Change radio button alignment
Disable radio buttons
OnClick enables/disables text fields
Interactions on next page using radio buttons
Limitations & Workarounds
When radio buttons are grouped, only one radio button can be selected at a time. Select the radio buttons you want grouped, right-click, and select Assign Radio Group. In the dialog box, give the radio group a name and click OK.
If you'd like to add a button to a radio button to a group, select the additional button, right-click, and select Assign Radio Group. In the droplist, choose the name of the group you'd like to add it to and click OK.
To remove a button from a group, select the button, right-click, and select Assign Radio Group. In the group name field, clear the text and click OK.
Toggle selections by grouping radio buttons
Back to Widgets
Radio buttons can be dynamically selected using the action "Set Widget/Variable Values" with the selections "Is Checked of *RadioButton* equal to value *True/False*"
The download also contains an additional example showing how to toggle a checkbox selection dynamically.
Dynamically select radio button
Selecting a radio button can be used to change content dynamically on the same page using conditions and dynamic panels. The condition "Is checked of *radiobutton* equals value true" checks if the radio button has been selected and then performs an action.
Show content based on radio button choice