--- title: "Example: Disabling a Button Until a Toggle Key Is Selected Without Using Custom Scripts" slug: "example-disabling-a-button-until-a-toggle-key-is-selected-without-using-custom-scripts" updated: 2026-06-03T17:58:02Z published: 2026-06-03T17:58:02Z canonical: "documentation.decisions.com/example-disabling-a-button-until-a-toggle-key-is-selected-without-using-custom-scripts" stale: true --- > ## Documentation Index > Fetch the complete documentation index at: https://documentation.decisions.com/llms.txt > Use this file to discover all available pages before exploring further. # Example: Disabling a Button Until a Toggle Key Is Selected Without Using Custom Scripts Follow an example that uses Screen Builder's built-in functionality to disable a form-submission button until a toggle key is selected (acknowledge the form). This example does not use custom scripts. ## Overview > [!NOTE] > **Intended audience:** Process designers, Web designers, graphic designers, software developers, coding engineers > > **Tags:** Screen design; Check Box control; Rich Text control; Visibility Rules; HTML When designing a Screen, it is possible to customize functionality by using custom scripts. However, such customization makes the Screen prone to errors and difficult to support or debug later. Most design needs can be met without custom scripts by simply using the functionality available in the Screen Builder. #### Example of Disabling a Button Until a Toggle Key Is Selected Consider a Screen design that uses the following controls with their respective default display states: - [**Check Box**](/v1/docs/checkbox-control) **control:** A Check Box control displays by default with the toggle key to acknowledge the terms of the form. - [**Rich Text**](/v1/docs/rich-text-control) **control:** A Rich Text control displays HTML containing the image of a disabled button until all required information in the form has been entered. The Rich Text control displays by default to appear as a disabled button. - [**Submit Button**](/summer-2024/A7mdugENW7gZw1jmnrOv/designer-screens/control-descriptions/submit-button-control-settings-1) **control:** A Submit Button control remains hidden until the state of the Check Box control is `True`. Since the the Check Box control is `FALSE` by default, the Submit Button control is hidden by default. For example, the **Save Form** button in the following screen appears disabled until the user agrees to the terms of the form. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/52ca1ae0-f1ed-4645-a95e-43cf924252ce.png) After the terms are agreed to, the **Save Form** button enables. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/0d140971-f806-4bc5-be4a-492717ab7e98.png) Follow these guidelines to design a Screen with a disabled button until a toggle key is selected. This example does not use a custom script as described in this [best practice](/v1/docs/screen-design-best-practices#avoid-using-custom-scripts-to-enhance-processmaker-screen-functionality): 1. [Create a new Screen](/v1/docs/create-a-new-screen#create-a-new-processmaker-screen). The new Screen opens in Design mode. 2. [Add a Check Box control](/v1/docs/checkbox-control#add-the-control-to-a-processmaker-screen) and configure the following settings: - From the **Variable** panel, enter in the **Variable Name** setting `i_agree`. - Enter in the **Label** setting `I agree to the terms of this form`. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/e562e519-a622-47a9-b2b5-fd9232033696.png) - From the **Design** panel, select the **Toggle Style** setting. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/8a8bdce1-0ec7-42e6-bacb-3fa63474b9be.png) 3. [Add a Rich Text control](/v1/docs/rich-text-control#add-the-control-to-a-processmaker-screen) and configure the following settings: - From the **Configuration** panel, enter the following HTML in the **Content** setting: `<span class="btn btn-primary disabled">Save Form</span>`. This HTML uses the `btn` (button) class to display a disabled button using the same text `SAVE FORM` as the Submit Button control displays its **Label** setting value (described below). ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/f522c79e-f210-41fe-95b8-ef6b409fd5e1.png) - From the **Advanced** panel, enter in the **Visibility Rule** setting `i_agree == false`. This [visibility rule](/v1/docs/submit-button-control#visibility-rule) means that the Rich Text control remains hidden while the Check Box control's state remains `FALSE` (not selected). ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/d318166b-5f22-4ad3-85f6-b397921521f4.png) 4. Insert a [Submit Button](/v1/docs/submit-button-control) control and configure the following settings: - From the **Variable** panel, enter in the **Label** setting `Save Form`. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/99cf2ca0-aa18-4ea2-8121-d177d686d873.png) - From the **Advanced** panel, enter in the **Visibility Rule** setting `i_agree == true`. This visibility rule means that the Rich Text control hides while the Check Box control's state becomes `TRUE` (selected). The Submit Button control displays. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/17f40d07-1f04-43b2-8f73-5e7b3234fb8d.png) 5. The Screen is now complete. [Save your Screen](/v1/docs/validate-and-publish-a-screen#publish-your-screen). ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/6273d9ee-2881-44a8-b0ac-5be6a2ae6169.png) 6. Click the **Preview** icon to test the Screen.