Toggles for Power Apps

Add switch controls and toggle buttons for on/off settings in your Power Apps. Toggles provide an intuitive way to control binary options.

When to use toggles

Toggles are perfect for settings that have only two states - on or off, yes or no, enabled or disabled. They're instantly understandable and provide immediate visual feedback.

Choose your toggle style

Toggle

Simple toggle with "On" and "Off" text labels. Classic style that's clear and familiar.

Best for: Settings screens where you want explicit labels. Good for users who need clear confirmation of the current state.

Settings you can customize:

• On/Off text labels
• Toggle width

Toggle Square

Clean square-styled switch with rounded corners. Modern, minimal design without text labels.

Best for: Settings panels where space is limited. Works well in lists of multiple toggle options.

Settings you can customize:

• Width and height
• Thumb and track colors

Toggle On/Off

Modern switch with ON/OFF text inside the track. Labels move with the thumb for clear state indication.

Best for: Settings where you want visible text labels in a compact design. Clear state indication without extra space.

Settings you can customize:

• Width and height
• Track colors per state

Toggle Outline

Outlined switch with transparent background and colored border. The thumb changes color based on state.

Best for: Light-themed apps where you want a subtle, elegant toggle. Works well on white backgrounds.

Settings you can customize:

• Width and height
• Border and thumb colors

Toggle Lock

Switch with lock/unlock icons. Shows a lock icon when ON (locked) and unlock icon when OFF.

Best for: Security settings, privacy controls, and anything related to locking or protecting content.

Settings you can customize:

• Width and height
• Icon and track colors

Toggle Check/X

Switch with checkmark and X icons. Green with checkmark when ON, red with X when OFF.

Best for: Approval settings, feature toggles, and anywhere green=good/red=bad makes sense.

Settings you can customize:

• Width and height
• Success/error colors

Implementation steps

1. Select your toggle style

Go to Toggles and choose the style that fits your app's design and use case.

2. Configure the toggle

Click on your chosen component and use the Settings tab to adjust:

• Size - Set width and height to fit your layout
• Labels - (if applicable) Customize on/off text
• Colors - Match your app's color scheme

3. Copy YAML code

Switch to the YAML tab and copy the generated Power Apps code to your clipboard.

4. Paste into Power Apps

Open Power Apps Studio, right-click in the Tree view, and select "Paste code".

Connect toggle logic

After pasting, connect the toggle to your app's settings:

Track toggle state

// Variable to track on/off state
Set(varDarkMode, !varDarkMode)

// Or for component-specific toggle
UpdateContext({locNotificationsEnabled: !locNotificationsEnabled})

Save setting to data source

// Save user preference
Patch(
    UserSettings,
    LookUp(UserSettings, UserID = User().Email),
    {DarkMode: varDarkMode}
)

Apply setting immediately

// Change app behavior based on toggle
If(varDarkMode,
    Set(varBackgroundColor, "#1a1a1a"),
    Set(varBackgroundColor, "#ffffff")
)

Load saved setting on start

// In App.OnStart
Set(
    varDarkMode, 
    LookUp(UserSettings, UserID = User().Email).DarkMode
)

Disable based on condition

// Disable toggle if user doesn't have permission
!User().Email in AdminUsers

Common use cases

Dark mode toggle

Use Toggle Square or On/Off to let users switch between light and dark themes.

Notifications setting

Use Toggle with "On"/"Off" labels for notification preferences.

Privacy control

Use Toggle Lock for privacy settings like "Make profile private" or "Hide from search".

Feature flags

Use Toggle Check/X for enabling/disabling app features. Green checkmark confirms the feature is active.

Auto-save setting

Use Toggle On/Off for settings like "Auto-save changes" or "Sync automatically".

Security settings

Use Toggle Lock for "Two-factor authentication", "Require password", or "Lock after 5 minutes".

Best practices

• Make effect immediate - Toggles should apply changes right away, not require a submit button
• Use clear context - The setting label next to the toggle should make the on/off meaning obvious
• Position consistently - Put toggles on the same side (usually right) in settings lists
• Show current state clearly - Users should instantly see if a toggle is on or off
• Consider accessibility - Toggles should be large enough to tap easily (44px minimum)
• Save preferences - Remember user's choices between sessions

Troubleshooting

Toggle not switching

Check that your OnSelect formula properly toggles the variable (use !varName to flip the value).

State not persisting

Make sure you're saving the toggle state to a data source and loading it when the screen opens.

Visual state not updating

Verify the toggle's Fill/Color properties reference your state variable to change appearance.

Toggle affecting wrong setting

Check variable names - each toggle should have its own unique variable.

Initial state wrong

Set the default state in the toggle's Default property or initialize the variable in App.OnStart.