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.

Still need help? Check out the forum or drop us a line at support@axure.com.

© 2002-2013 Axure Software Solutions, Inc. All rights reserved.

Mockup Software

Wireframe Software

Flowchart Software

Prototyping Software

SRS Documents

Web Design Software

iPhone Mockup Tool

iPad Mockup App

Visio Alternative

Powerpoint Alternative

Use Axure RP as:

WYSIWYG Editor

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.

Download Example

Download Example

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

Example Use

In a form

Editing Radio Buttons

Set selected by default or dynamically

Change radio button alignment

Disable radio buttons

Common Interactions

OnClick enables/disables text fields

Interactions on next page using radio buttons

Limitations & Workarounds

Styling

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

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.

Download Example

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. 

Download Example

Show content based on radio button choice