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.

1

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.

2

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.

3

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.

4

Save and Activate

• Click Save in the top right.
• Click Activate and add the component to a Lightning Page using the Lightning App Builder.

Configuration

To configure the Toggle, select it on the canvas. The Edit Toggle Input panel opens on the right with three tabs: Properties, Interactions, and Style. 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).

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)

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.

Use Cases

Email Notification Preference

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

1

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

2

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."

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.

1

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}.

2

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.

Interactions

Interactions 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.

Styling

Configure the Toggle's appearance from the Style tab of the Edit Toggle Input panel.

Margin

Controls the outer spacing around the component.

• Top / Right / Bottom / Left: Adjust the space on each side.

Padding

Controls the inner spacing between the component's content and its edges.

• Top / Right / Bottom / Left: Adjust the space on each side.

Size

Controls the component's dimensions.

• Width / Height: Set fixed dimensions.
• Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
• Overflow: Control how content that exceeds the bounds is handled.

Border

Customizes the border surrounding the component.

• Color / Size / Style / Radius: Set the border color, thickness, style, and corner rounding.

Label

Styles the field label.

• Color / Font Size / Font Style / Font Weight: Set the label color and typography.

Toggle

Styles the toggle switch.

• Background Color / Background Color Checked / Background Color Hover: Set the track background in each state.
• Switch Background Color / Switch Background Color Checked: Set the switch knob color.
• Mark Color: Set the checkmark color.
• Border Color / Border Color Hover / Border Radius: Customize the toggle border.

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.