# Toggle

## Overview

The Toggle component displays a switch users can slide to toggle between two states. Key features include:

* **Clear Visual Indication**: Provides an immediate visual indication of the current state (on or off).
* **Customizable Label**: Add a text label to explain the toggle's purpose clearly.
* **Data Binding**: The toggle's state (checked or unchecked) is stored in a Boolean Variable resource, making it easy to use in conditional logic, filters, and other interactions.
* **Customizable Messages**: Display different messages depending on whether the toggle is checked or unchecked.
* **Styling Options**: Control the size and label variant.

***

## Configuring the Toggle Component

Select the Toggle component on the canvas to access its properties in the Properties Panel (right panel).

### Basic Properties

These properties control the fundamental data and labeling of the Toggle.

* **API Name**: (Text) A unique identifier for this component instance (e.g., EnableFeatureToggle, ShowDetailsToggle).
* **Label**: (Text) The text label displayed next to the toggle switch. Example: "Enable Feature", "Show Details", "Active". Be clear and concise.
* **Field Level Help**: (Text, Optional) Help text displayed next to the label, providing additional context or instructions.
* **Value** (Checked): (Boolean - Crucially Important) This property holds the current state of the toggle:
  * true: The toggle is checked (on).
  * false: The toggle is unchecked (off).
  * Data Binding: You must bind this property to a Boolean Variable resource. This variable will:
    * Store the user's selection.
    * Allow you to use the toggle's state in other parts of your component.
    * Allow you to set a default state by initializing the Boolean variable.

### Appearance Properties

These properties control the visual presentation of the Toggle.

* **Variant**: (Text - Select from options) Controls the visual style and positioning of the label:
  * standard: Label is displayed above the toggle.
  * label-inline: Label is displayed to the left of the toggle.
  * label-stacked: Label is displayed above the toggle (similar to standard).
  * label-hidden: The label is hidden. Use this only if the toggle's purpose is clear from context.
* **Size**: (Text- Select from options) Select a size for your toggle.
* **Hide Mark**: (Boolean - Checkbox) If enabled, this setting hides the visual mark (checkmark) inside the toggle. The sliding animation will be the indicator.

### Behavior Properties

These settings affect user interaction.

* **Required**: (Boolean - Checkbox) If enabled, the user must interact with the toggle. This setting is not commonly used.
* **Read Only**: (Boolean - Checkbox) If enabled, the user can see the toggle's state, but they cannot change it. Useful for displaying a read-only setting.
* **Disabled**: (Boolean - Checkbox) If enabled, the Toggle component is completely disabled and cannot be interacted with.
* **Visible**: (Boolean) Controls whether the Toggle component is visible on the page. Bind this to a Boolean Variable or Formula for dynamic visibility.

### Custom Messages (Optional)

These properties let you customize messages.

* **Message Toggle Active**: (Text) The message displayed when the toggle is checked (on).
* **Message Toggle Inactive**: (Text) The message displayed when the toggle is unchecked (off).

***

## Example: Controlling Component Visibility

This example illustrates how to leverage the Toggle component to conditionally display other components, enhancing the user experience by presenting information only when needed.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fq1xfuGF4aeyi2IwP8A0W%2F2025-03-17_20-48-14%20(1).gif?alt=media&#x26;token=b8ba127d-7dc7-440a-87de-07884012ae7d" alt=""><figcaption></figcaption></figure>

1. **Add a Toggle**: Drag a Toggle component onto your canvas.
   * API Name: DetailsToggle
   * Label: "Show Details"
2. **Add a Record Detail Component** (or any other component): Drag a Text component (or any component you want to display conditionally) onto the canvas.
   * Value: (Set this to whatever content you want to show/hide)
3. Set the Record Detail Component's Visibility
   * Select the Record Detail component.
   * In the Properties Panel, find the Set Component Visibility property.
   * Bind the Toggle checked property to true.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FHJr1WKW39GFWNBh4w8ko%2F2025-03-17_20-50-15.png?alt=media&#x26;token=e5e2c0f1-bf3a-4cc9-b77c-7f00d8cfd6e4" alt="" width="375"><figcaption></figcaption></figure>

Now, the Text component will only be visible when the Toggle is switched on (and the "`Checked`" variable is true).

***

## Key Considerations

* **Clear Labeling**: Use a clear and concise label to explain the toggle's purpose.
* **Consider Read Only/Disabled**: Use Read Only to display a setting. Use Disabled to indicate the toggle is temporarily unavailable.
* **Use Cases**: Consider using a Toggle component to control component visibility or to set up a variable.