RADIO BUTTON WIDGETS

REFERENCE

LEARNING AND

RESOURCES

Intro to Axure RP

Viewing and Sharing HTML

     Output

Organizing Widgets

Interactions

WIDGETS

Shape

Image

Line

Hot Spot

Dynamic Panel

Inline Frame

Repeater

Text Field and Text Area

Droplist

List Box

Checkbox

Radio Button

HTML Button

Tree

Table

Menu

Snapshot

Groups

Connectors

Vector Drawing

LIBRARIES

Widget Libraries

PAGES

Pages

Grids, Guides, and

     Snapping

MASTERS

Masters

Raised Events

STYLES

Page and Widget Styles

DOCUMENTATION

Flow Diagramming

Widget and Page Notes

Word Specification

Print Settings

GENERATED HTML

HTML Generator

Sidebar

AXURE SHARE

Basics

Security

Mobile App

Mobile Settings

Website Hosting Tutorial

Slack App

Hipchat Integration

Troubleshooting

     Connection Issues

AXURE SHARE ENTERPRISE

User Guide

Installation Guide

Accounts and Permissions

TEAM PROJECTS

Creating and Using

SVN Troubleshooting

ADVANCED INTERACTIONS

Variables

Conditional Logic

Math, Functions, and

     Expressions

Adaptive Views

INSTALLATION

TROUBLESHOOTING

GUIDES

Mac

Windows

© 2002-2017 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.