Toggles for Power Apps
A toggle is a switch with two states, on and off, that changes the moment it is tapped, with no Save button. The PowerLibs toggles are not the built-in Toggle control: each one is an image whose picture is an SVG written as a formula, with a transparent button on top. That is why the knob slides smoothly and the colors are yours. The state lives in a variable, not in a Value property. Toggle is free; the other variants need a Components, Ultra, Team or Lifetime plan.
Pick a variant
| Component | Plan | YAML | What it is for | Settings you can change |
|---|---|---|---|---|
| Settings Row Toggle | Paid | Classic, Modern | Title, explanation and the switch on the right; the whole row taps | Explanation part, Title, Explanation, Starts on, Size, Color when on |
| Toggle List | Paid | Classic, Modern | A card with several switch rows, backed by a collection of ids | Reset button part, Heading, Rows with title, explanation and On, Size, Color when on |
| Favorite Toggle | Paid | Classic, Modern | A heart, star or bookmark that fills with a pop, optional count | Count part, Shape (heart, star, bookmark), Color when on, Count, Tooltip |
| Toggle | Free | Classic, Modern | The standard switch with a label, brand color when on | Label part, Label text, Starts on, Size, Color when on |
| Toggle On/Off | Paid | Classic, Modern | ON and OFF written inside the track, for states that must read without color | The same as Toggle |
| Toggle Square | Paid | Classic, Modern | Squared track and knob for squarer apps | The same as Toggle |
| Toggle Lock | Paid | Classic, Modern | A padlock in the knob that closes when on: locked records, read-only modes | The same as Toggle |
| Toggle Check/X | Paid | Classic, Modern | Green with a check when on, red with an X when off: inspections, checklists | The same as Toggle, plus Color when off |
| Toggle Outline | Paid | Classic, Modern | A hollow track with a filled knob, lighter in dense forms | The same as Toggle |
Paid means a Components, Ultra, Team or Lifetime plan (pricing). Classic and Modern are the two Power Apps control sets you can pick from the Copy YAML button. Open the category in the library: Toggles.
To copy a variant into Power Apps Studio, follow Getting Started.
After you paste
Each toggle keeps its state in its own context variable, named after the toggle: varToggle, varToggleOnOff, varToggleSquare, varToggleOutline, varToggleLock, varToggleCheckX, varSettingRow, varFavorite. The Toggle List keeps the ids of the rows that are on in the collection colToggleListOn. Names use your prefix settings. A second stamp variable, for example varToggleRun, makes the picture reload so the slide plays on every tap; you never touch it.
Read the state anywhere on the screen:
// Visible of a section
varToggle
// A row of the Toggle List
2 in colToggleListOn.id
Start on: switch Starts on in Settings, and the formulas read Coalesce(varToggle, true), so the switch shows on before the first tap. To bind to a record, set the variable in the screen's OnVisible:
UpdateContext({ varToggle: LookUp(Preferences, User = User().Email).DarkMode })
Save each change in the tap button's OnSelect, after the line that flips the variable:
Patch(Preferences, LookUp(Preferences, User = User().Email), { DarkMode: varToggle })
Good to know
- Two copies of the same toggle on one screen share the variable. Paste the second, then rename the variable in its two formulas (the Image and the button's OnSelect).
- A context variable belongs to its screen. For a value other screens read, change
UpdateContexttoSetand give it a global name. - Sizes are Small (36 by 20), Medium (44 by 24) and Large (56 by 30). Toggle On/Off needs Medium or Large for the words to fit.
- The on color is your brand color until you pick one; Check/X defaults to green and red on purpose. The off track is grey on the light theme and navy grey on the dark one.
- Inside a gallery use the Toggle List pattern: one collection of ids and
ThisItem.id in colToggleListOn.id, not one variable per row. The Favorite Toggle's instructions show the same for hearts in a gallery. - Every toggle offers Classic and Modern YAML with the same layout.
Related
Open the family in the library at Toggles. Related guides: Input Fields and Buttons.