Round up them radio buttons and group em up! You'll be togglin' in no time.

Example use of a radio button is in a form.

A radio button can be selected by default either by clicking the box in the design area, 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 Selected/Checked with the selection value equals true.

Change the alignment of your radio buttons in your form mockup.

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 selecting the Left or Right radio buttons in the Properties tab.

Set

Features

Learn

Community

Company

Buy

Download

Axure Share

Forum

Manage Licenses

Home

Features

Community

Learn

Support

Company

Download

Buy

Contact

Privacy

Legal

Sitemap

© 2002-2014 Axure Software Solutions, Inc. All rights reserved. Axure is a registered trademark of Axure Software Solutions Inc.

u63_start u63_end u63_line

Patents

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.

Enabling and disabling text fields using an OnClick interaction in Axure.

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.

Storing variables using radio buttons in your prototype to show dynamic content on the next page.

Radio buttons are a fixed height and width. You can edit the text but cannot change the size or shape of the actual button.

Disable radio buttons dynamically or using the context menu.

By default, the radio button will be enabled when added to your design. In some cases you may want to disable it by default. To do this, right-click the radio button and select Disabled.

 

The checkbox can also be enabled and disabled in an interaction by using the Enable or Disable 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.

RADIO BUTTON WIDGET

Used in a form where a user is making one choice

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

Toggle radio button selections in your wireframe using assign radio group.

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 Selected/Checked" with the selections value equals true.

 

The download also contains an additional example showing how to toggle a checkbox selection dynamically.

Dynamically selecting a radio button using an OnClick interaction in your wireframe.

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. 

Using dynamic panels and radio buttons to dynamically show content.

Show content based

on radio button choice

u178_start u178_end u178_line
u180_start u180_end u180_line
u182_start u182_end u182_line
u184_start u184_end u184_line
u186_start u186_end u186_line
u188_start u188_end u188_line

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

THE ROUND UP