RADIO BUTTON WIDGETS

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

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

MOST COMMON USE

FORM OPTIONS

A radio button is a form control that allows a user to choose one from among several related options. For example, if a user enters a phone number, they could then choose from a small group of radio buttons to indicate whether the number is their home, work, or cell number.

EDITING

ADDING TEXT

Double-click a radio button widget to edit its text. (Double-clicking gives you access to the most common editing function for each widget type.) If you want to add new text to a radio button widget, you can just begin typing while the widget is selected.

LOCATION AND SIZE

To move a widget, drag and drop it into place or use the arrow keys to nudge. You can also choose the exact location of a widget using the "x" and "y" fields in the top toolbar or in the Inspector’s Style tab.


When a widget is selected, a green border is drawn around it. Handles on the border can be dragged to resize the widget. Widgets can also be resized to a specific pixel value. Use the “w” and field in the top toolbar or in the Inspector’s Style tab to set the checkbox’s width in pixels. The height of a radio button widget is set automatically according to the height of its contents.

STYLING

Editable properties of a radio button widget's formatting include text size, font, font family, and color. These properties can be controlled from both the Style tab of the Inspector and in the Style Toolbar at the top of the interface.


The button portion of a radio button widget is a fixed height and width. You can edit the label text, including changing its text color and size. It is not possible to change the style, size, or shape of the button itself—web browsers reserve control over styling of this portion. (If a custom appearance is needed, you can make a custom radio button using shape and label widgets.)

ALIGNMENT

By default, the radio button is on the left and the associated text is on the right. You can swap the order so that the text is on the left and the button is on the right. In the Properties tab, use the "Align button" radio buttons. Choose between "Left" and "Right" alignment options.

INTERACTIVITY

SELECTING A RADIO BUTTON

A radio button can start in its selected state. To set a radio button to its selected state, click the button on the canvas or click the "Selected" option in the Properties tab.

Radio buttons can be selected in the HTML output as well. The user can click the radio button to select it.

You can also dynamically set a radio button to selected. Use the action "Set Selected/Checked" with the selected value set to "true".

DYNAMICALLY SETTING TEXT ON A RADIO BUTTON

Use the action "Set Text" to change the text on a radio button widget with an interaction.

RADIO GROUPS

With radio groups, you can create a relationship among a group of radio button widgets such that only one widget at a time can be set to selected. When any radio button in the group is selected, all others are automatically deselected. Adding your radio buttons to radio groups is a necessary step in achieving the behavior users have been conditioned to expect from this type of form control.

 

Use the "Radio Group" field in the Properties tab to add a widget to a radio group. To add a new radio group to the page, type a name in the field. You can also choose an existing group from the dropdown. To remove a widget from a radio group, delete the group's name from the "Radio Group" field.