Toggle creates a two option, toggleable element. Toggles are generally used in app menus or as action buttons. Toggles can be grouped together and depend on the state of a parent toggle. If the parent toggle is off, the descendent toggles are usually disabled.


import React from "react";
import { View, PageView, Content, Text, Toggle } from "magic-script-components";
export default class MyApp extends React.Component {
state = { pageIndex: 0 };
onSwitchHandler = eventData => {
this.setState({ pageIndex: eventData.On ? 1 : 0 });
render() {
return (
<View name="main-view">
localPosition={[0, 0.25, 0]}
text="Switch Page"
<PageView name="page-view" visiblePage={this.state.pageIndex}>
<Content name="page-0">
<Text textSize={0.1}>Page One</Text>
<Content name="page-1">
<Text textSize={0.1}>Page Two</Text>

Common Events

Common Properties

Create Properties

NameTypeDefault ValueDescription
textstringn/aThe UTF-8 encoded text to initially set the Toggle label to.
typestringtopThe location of the toggle label. Only placing the label to top and left of the toggle are currently supported.
heightstring0.0The height of the toggle, 0 for default.

Element Properties

onbooleanSets whether the toggle state is ON.

type options: ToggleType