Axure Docs
  • Axure RP Reference
  • Axure RP Tutorials
  • Axure Cloud Reference
  • Axure Support
  • Download

›Mobile Patterns

The Basics

  • Interactive Button
  • Hiding and Showing Widgets
  • Pass Text to Next Page
  • Anchor Link
  • Embedding Media
  • Full Width Image or Banner
  • Scrolling Region
  • Rotating Carousel / Slideshow
  • Navigation Menu
  • Tooltips
  • Tab Menu
  • Accordion Menu
  • Drag and Drop

Complex Interactions

  • Account Login
  • Auto Tab Fields
  • Blinking Text
  • Dynamically Set Droplist Options
  • Set Text with Droplist
  • Required Fields
  • Scroll Activated Sticky Header
  • Set Dynamic Panel State on Next Page
  • Slider Control
  • Terms and Conditions
  • Timer

Mobile Patterns

  • Swiping Slideshow
  • Toggle Switch

Toggle Switch Tutorial

In this tutorial, you'll learn how to create a toggle switch that changes color when toggled on and off.

Note

Click here to download the completed RP file for this tutorial.

1. Widget Setup

Create the Toggle Switch's "Off" State

  1. Open a new RP file and open Page 1 on the canvas.

  2. Drag a Box 3 widget onto the canvas. Set its width to 50 and its height to 20. In the Style pane, set its corner radius to 25.

  3. Next, drag an ellipse widget onto the canvas and set both its width and height to 30.

  4. Drag the ellipse on top of the rectangle and line it up left and middle using the Align options in the top toolbar. This pair of widgets will be the toggle switch's "off" state.

Create the Toggle Switch's "On" State

  1. Select the widgets, copy them, and paste a duplicate of them onto the canvas.

  2. Set the duplicate ellipse's fill color to blue and align it to the rectangle widget's right edge. This pair of widgets will be the toggle switch's "on" state.

2. Place the Toggle Widgets in a Two-State Dynamic Panel

  1. Select the "off" widget pair, right-click the selection, and choose Create Dynamic Panel in the context menu.

  2. In the Outline pane, hover your cursor over the new dynamic panel widget's item and click the Add State icon to the right.

  3. Still in the Outline pane, select the "on" ellipse and rectangle and drag them to the right to indent them under State 2. This will add them to that dynamic panel state and open the state on the canvas.

  4. Move the "on" ellipse and rectangle to (0,0) on the canvas.

  5. Click Close at the top-right of the canvas or press ESC to exit state-editing mode.

3. Set the Dynamic Panel's State to "Next" When It's Clicked

  1. Select the dynamic panel state widget and click New Interaction in the Interactions pane.

  2. Select the Click or Tap event in the list that appears, and then select the Set Panel State action.

  3. Select This Widget in the Target dropdown.

  4. In the State dropdown, select Next. Then check the box for Wrap from last to first that appears. This will allow the dynamic panel to go back to its first state after the last has been reached.

  5. Click OK to save the action.

4. Preview the Interaction

Preview the page and click the toggle switch to toggle it on and off.

← Swiping Slideshow
  • 1. Widget Setup
    • Create the Toggle Switch's "Off" State
    • Create the Toggle Switch's "On" State
  • 2. Place the Toggle Widgets in a Two-State Dynamic Panel
  • 3. Set the Dynamic Panel's State to "Next" When It's Clicked
  • 4. Preview the Interaction
Axure Docs
Stay Connected

Sign up to receive Axure tutorials and news. You can unsubscribe at any time.

Axure
TourEnterpriseCompanyDownloadPurchase
Legal
Customer AgreementPrivacy PolicyGDPRSecurityPatents
Resources
BlogForumLicense PortalAxure Cloud
Support
Learn and SupportGetting StartedReferenceWidget LibrariesAxure RP 8 Documentation and Tutorials
Copyright © 2002–2021 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.