Skip to main content

Toggle switch tutorial

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

info

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.