Skip to main content
Toggle(props: { label?: string; isOn: boolean; setIsOn: (value: boolean) => void }): Component;

​
Parameters

​
props
{ label?: string; isOn: boolean; setIsOn: (value: boolean) => void }
Configuration object for the toggle control.

​
Support

​
Usage

​
Basic toggle

const [isEnabled, setIsEnabled] = useState(false)

Toggle({ isOn: isEnabled, setIsOn: setIsEnabled })

​
Toggle with label

const [notificationsOn, setNotificationsOn] = useState(false)

Toggle({ label: "Enable notifications", isOn: notificationsOn, setIsOn: setNotificationsOn })

​
Form toggle

const [darkMode, setDarkMode] = useState(false)
const [pushNotifications, setPushNotifications] = useState(false)
const [locationServices, setLocationServices] = useState(false)

VStack({ alignment: "leading", spacing: 16 }, [
    Toggle({ label: "Dark mode", isOn: darkMode, setIsOn: setDarkMode }),
    Toggle({ label: "Push notifications", isOn: pushNotifications, setIsOn: setPushNotifications }),
    Toggle({ label: "Location services", isOn: locationServices, setIsOn: setLocationServices })
])
.padding()

​
Settings list with toggles

const [wifiEnabled, setWifiEnabled] = useState(true)
const [bluetoothEnabled, setBluetoothEnabled] = useState(false)

VStack({ spacing: 0 }, [
    HStack([
        VStack({ alignment: "leading" }, [
            Text("Wi-Fi").font("body"),
            Text("Connected to MyNetwork").font("caption").foregroundStyle(Color("gray"))
        ]),
        Spacer(),
        Toggle({ isOn: wifiEnabled, setIsOn: setWifiEnabled })
    ])
    .padding(),
    Divider(),
    HStack([
        Text("Bluetooth"),
        Spacer(),
        Toggle({ isOn: bluetoothEnabled, setIsOn: setBluetoothEnabled })
    ])
    .padding()
])