The Toggle Button () form object represents a toggle button. A toggle button acts as two buttons in one, with one action (command sequence) that runs when a user selects the button and another action that runs when a user deselects the button.

Enter the name of the toggle button object in the Name field.

In the Text field, enter the text that appears on the button.

To add an icon (image) to appear on the button, specify an image file to use from the Icon list, which includes all images in the Images library, or click the Add Image to Library and Use Here button () to locate an image to use on the file system. That image then becomes a part of the Images library and selected as the icon to use on the button. The icon replaces the text on the button if the button’s size is normal. For large buttons, both the text and the icon appear, unless they are empty. To display only the text, select None from the Icon list. Click the Export button () to export the image to the file system (for use in another application, for example).

From the Selected icon list, choose an icon that will be used to represent the selected state of the toggle button, from the Icon list, which includes all images in the Images library, or click the Add Image to Library and Use Here button () to locate an image to use on the file system. That image then becomes a part of the Images library and selected as the icon to use on the button. The icon replaces the text on the button if the button’s size is normal. For large buttons, both the text and the icon appear, unless they are empty. To display only the text, select None from the Icon list. Click the Export button () to export the image to the file system (for use in another application, for example). The Default setting uses the same icon for both the selected and the deselected states.

From the Size list, choose Large for a large toggle button or Small (the default).

From the Style list, choose Flat (the default), Raised, or Outlined. The Flat style has no border and, as the default, a transparent button background. The Outlined style looks like the Flat style but includes a border (outline). This look appears on Windows and in the web client. On macOS and Linux, the Flat and Raised styles look the same.

If you have selected Large from the Size list, a Selected style list appears where you can choose Color highlight (the default) or None (if the Style is Flat or Outlined). Selecting None makes it possible to skip the color highlight in cases where the icon itself indicates the state.

On Linux and macOS, the Style setting has no effect on large buttons (they have an outlined style), whereas for small buttons, the Flat style looks the same as Outlined, which is distinct from Raised. Windows and web clients support all styles for small and large buttons.

The text you enter in the Tooltip field becomes the tooltip of the button.

You can also define a shortcut for the button action that you enter in the Keyboard shortcut field. To add a keyboard shortcut, make the Keyboard shortcut field active and then type a keyboard shortcut on the keyboard.

In addition, the Settings window contains the following sections.

In this section you specify the data source for the toggle button. The section contains a tree with a filtered view of the tree in the Application Builder window. The nodes either represent some sort of data or have children that do. For a toggle button, the data source can be variables in the COMSOL Multiphysics model and scalar strings or Boolean variables that you define under Declarations. You can extend the list of available data nodes by clicking the Switch to Model Builder and Activate Data Access button () in the Source section header, which takes you to the Model Builder, and then selecting a node in the Model Builder branch whose data you want to access. With this button active, the Settings window of the selected node displays a Select Data Source check box (a green square) next to the settings that you can include. Click to select the check box to include the data as an available source node for check boxes.

When you select a node that represents data, the Use as Source toolbar button () below the tree becomes enabled. You can click it or, alternatively, press Enter, double-click, or right-click the node and choose Use as Source to add it as the selected source. You can also click the Create New Declaration and Use It as Source button () in the Source section header to create a new variable declaration and use it as the source. A Create and Use Variable dialog box opens, so that you can select the data type of the source (if applicable), its name, and its initial value (if applicable). The name cannot be in conflict with any existing variable declaration. Click the Edit Node toolbar button () below the tree to move to the corresponding node. If necessary, the program switches to the Model Builder.

After selecting a node as the source, the node appears as the selected source under Selected source.

From the Initial value list, select From data source to link this check box to a variable defined in the Source section above and use the value specified by that data source. Select Custom value to specify the initial state from the Initial state list: Selected (the default) or Cleared. The value for a selected toggle button is on and for a deselected toggle button is off.

For a “radio-button behavior” between multiple toggle buttons, use String sources instead of Boolean sources. When a String source is selected in the Source tree, a Value for selected field will be displayed instead of a label. When setting the string declaration to the value given by Value for selected, the toggle button will be selected; otherwise, it will be cleared. It will then not be possible to clear the toggle button in the app by clicking it again, only by clicking another button that uses the same value as source.

This section contains a tree with a filtered view of the trees in the Application Builder and Model Builder windows. The nodes either support a command or have children that do. When you select a node that supports one or more commands, the corresponding command toolbar buttons become enabled in the toolbar below the tree. You can also right-click a node to get a list of available commands for that particular node. Once you click a command with a node selected (or press Enter or double-click to add a command with its default command such as Run, Plot, or Set Value), the command and node appear in the last row of the table below the tree. This table contains all nodes that run. You can delete and move commands using the toolbar below the table.

In the Model branch, all nodes that represent some sort of data value, such as a parameter under the Parameters node, support the Set Value command. When adding a Set Value command to the table, the third column, Arguments, becomes enabled. In this column, you type the value to set. For data that represents arrays, use curly braces and commas to enter the array elements. For example, enter {1, 2, 3} to set a three-element array with the values 1, 2, and 3. See The Array 1D String Node for more details on how to enter arrays and matrices. For nodes that represent a file import, such as a Filename node under an Interpolation function node, an Import File command is available. You can also add a Plot command for all View nodes, providing the name of a Graphics object as the argument.

The tree includes a number of branches from the application tree in addition to the Model branch:

When you click one of the buttons underneath the tree, the currently selected command appears in the Command column in the table below. There are also Icon and Arguments columns, where you can enter any applicable arguments that the command uses.

Click the Convert to Method toolbar button () and choose Convert to Method or Convert to Form Method to convert the entire list of commands in the table to a global or form method that contains the equivalent code. After this operation, the list of commands only contains a single Run operation on the created method. When you select a method under Command, or there is exactly one method in the list, you can go to the editor window for that method by clicking the Go to Method button (). For information about the Edit Argument button (), see Editing Initial Values and Arguments in Declarations and Command Sequences. Use the Move Up (), Move Down (), and Delete () toolbar buttons to organize and remove commands from the list (and also remove the local method, if deleted).

The need to specify the alignment is most obvious when working in the grid mode. Then, it controls how the form object is aligned in its grid cell. Aligning the form object can be useful in the sketch mode too, and you can then use the alignment tools on the Arrange menu in the Form toolbar’s Sketch section. When running the application in any client other than the Windows client, the form objects may not be positioned exactly as seen in the Application Builder. This is because the form objects may have a different size in other clients, giving them a slightly different positioning. Specifying the alignment ensures that the form objects are aligned as you want them to be in all clients.

If you want to specify the width of the toggle button, first select Manual from the Width list. Then enter the width (in points) in the associated field. If you have chosen Fill from the Horizontal alignment list, you can instead specify a Minimum width. Choose Automatic to compute the minimum width automatically (typically this means a minimum size of 0) or choose Manual to specify a minimum width in the text field underneath.

If you want to specify the height of the toggle button, first select Manual from the Height list. Then enter the height (in points) in the associated field. If you have chosen Fill from the Vertical alignment list, you can instead specify a Minimum height. Choose Automatic to compute the minimum height automatically (typically this means a minimum size of 0) or choose Manual to specify a minimum height in the text field underneath.

Additionally, in the sketch mode, you can specify the absolute position of the toggle button using the Position x and Position y fields. In the grid mode, you can position the object in the grid and see the grid position as the Row, Column, Row span, and Column span values.

Under Cell margin (in grid mode only), you can control the margins around the form object. By default, the margins are taken from the parent form. From the Cell margin list, choose:

From the Text color list, select a color to use for the text: Inherit (the default; the form object then uses the setting from the Form it is located in), any of the predefined basic colors, or Custom, which makes it possible to select a custom color from a color palette.

From the Background color list, select a color to use as the background color for the toggle button: Choose Default (the platform then controls the background color), Transparent, any available color, or Custom, to choose the color from a color palette.

The font and the font size for the toggle button label use the font settings from the Forms node by default. Select a font from the Font list: Default font or any of the available fonts. If needed, choose or enter a font size (in points) in the Font size combo box. The default is to use the Default size for the font.

Select the Bold check box to use a boldface font and the Italic check box to use italics (an italic font).

Under State, you can control the initial state of the toggle button when users run the application. By default, the toggle button is visible and enabled. Clear the Visible or Enabled check box if you want to make the initial state so that the toggle button is hidden or unavailable. You can then make it visible or enable it using a method. In the Form Editor, the state of the form object is indicated by a change in its appearance. Objects that are hidden become visible when selected in the Form Editor.