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

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

 

CUSTOM CHECKBOX AND RADIO BUTTON

Create custom checkboxes and radio buttons using shape widgets. Use the Selected interaction style and the Show/Hide actions to indicate when a checkbox or radio button is selected.

STEP 1: TOGGLE SELECTED STATE AND TICK MARK VISIBILITY WHEN CLICKED

Select the "Custom Checkbox" group and double-click "OnClick" in the Properties tab of the Inspector to give it a new OnClick case.


In the Case Editor, choose the action "Toggle Selected" under "Set Selected/Checked". Under "Configure actions", check "This Widget". This will toggle the Selected states of the group itself and all of its contained widgets, which will toggle the "Button" widget's Selected interaction style.


Back in the left column, choose the action "Toggle Visibility" under "Show/Hide". Under "Configure actions", check the "Tick Mark" widget under the "Custom Checkbox" group.


Click "OK" to close the Case Editor.

STEP 5: PREVIEW

Preview the page in your web browser and click one of the custom radio buttons to select it, activating its Selected interaction style and showing its tick mark.


Then, click a different radio button to select it instead. As you click between the buttons, notice that the previously selected button is automatically unselected, returning it to its default styling and hiding its tick mark.

MORE RESOURCES

SETUP: HIDE THE TICK MARKS

In the training document, open the page named "Custom Checkbox and Radio Button". On the canvas are two widget groups: "Custom Checkbox" and "Custom Radio Button". Both groups consist of a grey-outlined "Button" shape widget, a green "Tick Mark" shape widget, and a text-bearing "Label" rectangle widget.


Select the "Custom Checkbox" group's "Tick Mark" shape widget by clicking it twice on the canvas: one click to select the group and a second to select the shape itself. (Alternatively, you can select the shape directly in the Outline pane.) Then, hide it by checking the "Hidden" checkbox in either the Style Toolbar or the Style tab of the Inspector.


Hide the "Custom Radio Button" group's "Tick Mark" shape widget in the same way.

CUSTOM CHECKBOX

STEP 2: PREVIEW

Preview the page in your web browser and click the custom checkbox. Notice that the button's outline turns green and becomes thicker, and the check mark is shown.


Click the custom checkbox again to return the button to its default styling and hide the check mark again.

CUSTOM RADIO BUTTON

 

 

STEP 2: SET SELECTED AND SHOW TICK MARK WHEN CLICKED

With the "Custom Radio Button" group still selected, double-click "OnClick" in the Properties tab of the Inspector to give it a new OnClick case.


In the Case Editor, choose the action "Selected" under "Set Selected/Checked". Under "Configure actions", check "This Widget". This will set the group and all of its contained widgets to their Selected states, which will activate the "Button" widget's Selected interaction style.


Back in the left column, choose the "Show" action under "Show/Hide". Under "Configure actions", check the "Tick Mark" widget under the "Custom Radio Button" group. Note that we aren't using the "Toggle" actions here because radio buttons generally cannot be unselected by clicking them again.


Click "OK" to close the Case Editor.

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

Custom Icon Button

Custom Text Field

Custom Checkbox and

     Radio Button

Custom Droplist

Custom Datepicker

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE

STEP 0: DOWNLOAD THE TRAINING FILE

If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.

 

STEP 1: CREATE SELECTION GROUP

Back in Axure RP, select the "Custom Radio Button" group and scroll down to the "Group" section of the Properties tab of the Inspector. In the "Selection Group" text field, enter "Custom Radio Group" (without quotes).


This will add the widget group to a selection group, allowing it to be automatically unselected whenever another widget or group in the same selection group is set to Selected. (We'll be creating more radio buttons in a later step to test out this functionality.)

 

 

 

STEP 3: HIDE TICK MARK WHEN UNSELECTED

Because only one radio button in a radio group may be selected at a time, we want to make sure that our custom radio button's tick mark can hide itself automatically when another radio button is selected. We can accomplish this by using the tick mark's OnUnselected event.


Select the "Custom Radio Button" group's "Tick Mark" shape widget by clicking it twice on the canvas: one click to select the group and a second to select the widget itself. (Alternatively, you can select the shape directly in the Outline pane.) Then, click the "More Events" dropdown in the Properties tab of the Inspector. Toward the bottom of the menu, click "OnUnselected" to set up a new OnUnselected case.


In the Case Editor, choose the action "Hide" under "Show/Hide". Under "Configure actions", check "This Widget". This will hide the "Tick Mark" shape whenever it is set to Not Selected, i.e., when the "Custom Radio Button" group is set to Not Selected. This will happen when another radio button in the "Custom Radio Group" selection group is set to Selected.


Click "OK" to close the Case Editor.

STEP 4: DUPLICATE THE CUSTOM RADIO BUTTON GROUP

It's difficult to test the functionality of a single radio button, so let's make a few more.


Right-click the "Custom Radio Button" group and select "Copy" in the context menu. Then, right-click the canvas and select "Paste" to paste a copy of the group at that location. Do this again to create a third copy.


The duplicate "Custom Radio Button" groups will have all the same interactions, properties, and styling as the original, so we don't need to take any further action to get them working. You may, however, want to rename the groups and change their label text to differentiate them.

Custom checkbox

TRY IT!