> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/toggle.md).

# Toggle

The Toggle component renders a slider that users can flip between two states — on (checked) or off (unchecked). The current state is exposed as a Boolean value you can bind to a Record field, a Resource Variable, or a Component Visibility rule.

Use it for user preferences ("Receive email notifications"), feature toggles ("Show advanced fields"), or anywhere you'd otherwise use a checkbox but want a more deliberate, switch-like interaction.

## Overview

This walkthrough adds a toggle that shows or hides a Record Detail panel based on the user's choice.

<figure><img src="/files/0T5tQOAvLCxHBWlfhcUv" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}

#### **Add the Toggle component to the Canvas**

* From the **Component Library** (left sidebar), drag the **Toggle** component onto the Canvas.
* Set **Label** to `Show Details`.
* Set **Variant** to `Label Inline` so the label sits on the left and the toggle on the right.
  {% endstep %}

{% step %}

#### **Bind Checked to a Resource Variable**

* In the Properties Panel, click into the **Checked** field.
* Switch to advanced expression mode and create a new **Boolean** Resource Variable called `ShowDetails` with default `false`.
* Bind **Checked** to `{!ShowDetails}`.

*Why: Binding to a Variable lets the toggle's state be referenced anywhere else on the page — including visibility rules on other components.*
{% endstep %}

{% step %}

#### **Add a Record Detail (or any component) to control**

* Drag a **Record Detail**, **Card**, or any container next to the Toggle.
* In that component's properties, find the **Component Visibility** rule.
* Add a rule: visible when `{!ShowDetails}` equals `true`.

*Why: This wires the Toggle's state directly to the component's visibility — flipping the toggle instantly hides or shows the panel, with no Interaction needed.*

<figure><img src="/files/M07Ma5APvYQpM0WfOwIy" alt="" width="375"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### **Save and Activate**

* Click **Save** in the top right.
* Click **Activate** and [add the component to a Lightning Page](/dynamic-components/core-concepts/publishing-your-dynamic-components.md) using the Lightning App Builder.
  {% endstep %}
  {% endstepper %}

## Configuration

To configure the Toggle, select it on the canvas. The **Edit Toggle Input** panel opens on the right. The sections below mirror the Properties tab from top to bottom.

### Properties

#### Label

The text shown alongside the toggle. Should clearly state what the toggle controls (for example, "Receive email notifications" or "Show advanced fields").

#### Checked

The current on/off state of the toggle. Bind this to a Boolean Resource Variable, a Record field, or a formula expression so the toggle reflects and updates real data. When left as a static value, the toggle has no persistent effect.

#### Field Level Help

Help text shown next to the label as a tooltip on the help icon. Use this to give users extra guidance about what the toggle controls.

#### Variant

Controls where the label appears relative to the toggle switch.

* **Standard** (default) — Label appears above the toggle. Best for form-style layouts.
* **Label Hidden** — Label is hidden visually but remains available to screen readers. Only use when the toggle's purpose is clear from surrounding context.
* **Label Inline** — Label appears to the left, toggle on the right. Use this when fitting a toggle into a row alongside other inline content.
* **Label Stacked** — Label appears above the toggle, explicitly stacked. Visually similar to Standard but more compact.

#### Size

The visual size of the toggle switch. Options: **X-Small**, **Small**, **Medium** (default), **Large**. For touch-first pages, use **Medium** or **Large** — **X-Small** is hard to tap accurately on phones.

#### Hide Mark

When enabled, hides the checkmark icon inside the toggle when it is on. The sliding animation alone signals the state. Off by default.

#### Required

Marks the toggle as required for form submission. When enabled, users must switch the toggle on before submitting. Pair this with **Message When Value Missing** for a clear error message.

#### Message When Value Missing

The error message shown if **Required** is on and the toggle is left off at submission. *Requires: **Required** = on.*

#### Disabled

Greys out the toggle and prevents all interaction. The current state still displays. Off by default.

Use **Disabled** when the toggle is temporarily unavailable (waiting on another field, the user lacks permission). The Change interaction does not fire when the toggle is Disabled.

#### Read Only *(advanced)*

The toggle's state displays but users cannot change it. Visually distinct from Disabled — preserves the active style. Off by default.

Use **Read Only** when the value is final and should not be edited (locked record, audit-only display).

{% hint style="info" %}

#### **Disabled vs Read Only**

Use **Disabled** when the toggle is temporarily unavailable (waiting on another field, user lacks permission). Use **Read Only** when the value is final and shouldn't be edited (locked record, audit-only display)
{% endhint %}

#### Message Toggle Active *(advanced)*

Text shown next to the switch when the toggle is on. Defaults to `Active`. Common overrides: `On`, `Yes`, `Enabled`, `Show`.

#### Message Toggle Inactive *(advanced)*

Text shown next to the switch when the toggle is off. Defaults to `Inactive`. Common overrides: `Off`, `No`, `Disabled`, `Hide`.

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Use Cases

### Email Notification Preference

A toggle on a Contact record that turns the weekly newsletter on or off.

{% stepper %}
{% step %}

#### **Configure the Toggle**

* **Label:** `Subscribe to Weekly Newsletter`
* **Variant:** `Label Inline`
* **Size:** `Medium`
* **Checked:** `{!$Record.Newsletter_Subscribed__c}`
* **Message Toggle Active:** `Subscribed`
* **Message Toggle Inactive:** `Unsubscribed`
  {% endstep %}

{% step %}

#### **Wire the Change interaction to update the record**

* On the **Change** trigger, add **Update Record**:
  * **Object:** `Contact`
  * **Record ID:** `{!$Record.Id}`
  * **Newsletter\_Subscribed\_\_c:** `{!Checked}`
* Add a **Show Toast** action: "Subscription preference updated."
  {% endstep %}
  {% endstepper %}

### Show Advanced Fields on a Form

A page-level toggle that reveals a section of advanced fields only when the user wants to see them.

{% stepper %}
{% step %}

#### **Add the Toggle and a Resource Variable**

* Drag in the Toggle, **Label:** `Show advanced options`.
* Create a Boolean Resource Variable `ShowAdvanced` (default `false`).
* Bind **Checked** to `{!ShowAdvanced}`.
  {% endstep %}

{% step %}

#### **Wrap the advanced fields in a Container**

* Wrap the advanced fields in a **Container** (or **Columns**) component.
* On the Container, set **Component Visibility** to: visible when `{!ShowAdvanced}` equals `true`.
  {% endstep %}
  {% endstepper %}

## Interactions

[Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Toggle Input. Configure them from the **Interactions** tab of the Edit Toggle Input panel.

### Change

Fires when the user flips the toggle on or off. Does not fire when the toggle is **Disabled** or when the value changes programmatically. Use the **checked** output variable to read the new state (`true` if turned on, `false` if turned off) and pass it to downstream actions such as Update Record, Execute Flow, or Update Variable.

## Troubleshooting Common Issues

* **Flipping the toggle doesn't update the bound record field** — No Interaction is configured on the Change trigger, or the Update Record action is missing the field mapping. Add an **Update Record** action on the Change trigger and map the toggle's **Checked** output to the target field.
* **Toggle initial state doesn't match the record** — Checked isn't bound to the record's field; it's set to a static value or left empty. Bind **Checked** to `{!$Record.YourFieldName__c}` so the toggle reads the current value when the page loads.
* **Toggle visually flips but the Change trigger doesn't fire** — The toggle is **Disabled** — disabled toggles don't dispatch the Change event. Turn off **Disabled**, or use **Read Only** instead if you only want to prevent edits while still showing the state.
* **Required setting doesn't block form submission** — Required only blocks submission when the toggle is part of a form context. On a Record Page without a wrapping form, the Required check has no effect; use a Validation Rule on the underlying Salesforce field instead, or wrap the toggle in a form-style container with submission logic.
* **Component Visibility rule based on the toggle doesn't work** — The toggle's Checked is bound to a Record field, not a Resource Variable. Visibility rules read from variables, not from in-memory toggle state. Bind **Checked** to a Resource Variable, then use that Variable in the visibility rule; optionally also write back to the record on the Change trigger.
* **"Active" / "Inactive" labels appear instead of custom text** — Message Toggle Active / Message Toggle Inactive are in the advanced section of the Properties Panel and were left blank. Open the advanced section and set the messages to your preferred text (for example, `On` / `Off`).
* **Toggle is too small to tap reliably on phones** — Size is set to X-Small or Small. Use **Medium** (default) or **Large** for any toggle on a touch-first page.
* **Hide Mark setting doesn't seem to do anything** — The mark is only visible when the toggle is on; Hide Mark removes the checkmark from the on-state. If you're testing in the off-state, no change is visible — flip the toggle on to verify the mark is hidden.
* **The toggle doesn't appear at all on the deployed page** — A Component Visibility rule is hiding it, or the parent container's visibility is false. Inspect the visibility rule on the Toggle and on every parent container up the tree.
* **Checked has no persistent effect** — The Toggle is a form input whose state is only meaningful when bound to something. Always bind **Checked** to a Resource Variable or a Record field, not a static value.
* **Unsure whether to bind Checked to a Variable or a Record field** — Use **Resource Variables** when the toggle controls UI behavior (visibility, conditional logic on the page). Use **Record fields** when the toggle persists a setting on the Salesforce record.
* **Required toggle shows a generic validation message** — Pair every Required toggle with a clear **Message When Value Missing** — generic validation messages frustrate users.
* **Change trigger doesn't fire after a programmatic state change** — Disabled toggles do not fire the Change trigger. If you need to react to programmatic state changes, use a separate Resource Variable observer rather than the toggle's interaction.
* **Toggle switch metaphor doesn't fit the use case** — For yes/no fields used in filtering or multi-option logic, use a Checkbox or Choice Set instead — the Toggle should signal a binary on/off state.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/toggle.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.