Suppose you have a form where some of the fields are irrelevant in some cases—a shipping address that matches the billing address for example. You can leave the billing address fields unavailable to save the user time filling in the form. You can implement such a form using the Switch component.

Start by adding a Form on a view and then a TextField on the Form that we will make available and unavailable depending on the switch position. Finally, add a Switch component.

Select the Switch on the canvas and in the Inspector on the right, locate Advanced > Additional Properties. Click Add to add a new property. As Name, provide the switch's checkedChange() event in the following format:


For the Value, we want to change the isEnabled property of the TextField. We can reference it by ID. You can check a component's ID in the Inspector.

mobiletextfield0.isEnabled = mobileswitch0.checked

This way, we are listening for a change of the Switch's "checked" state and modifying the TextField's enabled state accordingly.

If necessary, we can modify the initial state of the Switch to be "checked" by adding another additional property as follows:

Name: checked

Value: true