Edit

Toggle control in Power Apps

  • Article

A control that the user can turn on or off by moving its handle.

Description

A toggle is designed for recent GUIs but behaves the same way as a check box.

Key properties

Default – The initial value of a control before it is changed by the user.

Value – The value of an input control.

Additional properties

AccessibleLabel – Label for screen readers.

BorderColor – The color of a control's border.

BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – The thickness of a control's border.

DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

FalseFill – The toggle fill color when the toggle is off.

FalseHoverFill – The toggle hover fill color when toggle is off.

FalseText – The text shown when the toggle is off.

Fill – The background color of a control.

FocusedBorderColor – The color of a control's border when the control is focused.

FocusedBorderThickness – The thickness of a control's border when the control is focused.

HandleFill – The fill color of the toggle handle.

Height – The distance between a control's top and bottom edges.

HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

OnChange – Actions to perform when the user changes the value of a control (for example, by adjusting a slider).

OnCheck – Actions to perform when the value of a checkbox or a toggle changes to true.

OnSelect – Actions to perform when the user taps or clicks a control.

OnUncheck – Actions to perform when the value of a checkbox or a toggle changes to false.

PressedBorderColor – The color of a control's border when the user taps or clicks that control.

RailFill – The background color of the rectangle in a toggle control when its value is false or the color of the line to the right of the handle in a slider control.

RailHoverFill – When you hover on a toggle control or a slider, the background color of the rectangle in a toggle control when its value is false or the color of the line to the right of the handle in a slider control.

Reset – Whether a control reverts to its default value.

ShowLabel – Whether a text label is shown beside the toggle control.

TabIndex – Keyboard navigation order in relation to other controls.

TextPosition – Whether the label is to the left or the right of the toggle control.

Tooltip – Explanatory text that appears when the user hovers over a control.

TrueFill – Toggle fill color when the toggle is on.

TrueHoverFill – Toggle hover fill color when the toggle is on.

TrueText – Text shown when the toggle is on.

ValueFill – The background color of the rectangle in a toggle control when its value is true or the color of the line to the left of the handle in a slider control.

ValueHoverFill – When you keep the mouse pointer on a toggle control or a slider, the background color of the rectangle in a toggle control when its value is true or the color of the line to the left of the handle in a slider control.

Visible – Whether a control appears or is hidden.

Width – The distance between a control's left and right edges.

X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

If( Condition, Result )

Example

  1. Add a toggle, and name it MemberDiscount.

    Don't know how to add, name, and configure a control?

  2. Add a label, and set its Text property to this formula:
    If(MemberDiscount.Value = true, "Price: $75", "Price: $100")

    Want more information about the If function or other functions?

  3. Press F5, and change the value of MemberDiscount.

    The label shows a different price, depending on whether MemberDiscount is on or off.

  4. To return to the default workspace, press Esc.

Accessibility guidelines

Color contrast

There must be adequate color contrast between:

  • HandleFill and FalseFill
  • HandleFill and FalseHoverFill
  • HandleFill and TrueFill
  • HandleFill and TrueHoverFill
  • FalseFill and color outside the control
  • FalseHoverFill and color outside the control
  • TrueFill and color outside the control
  • TrueHoverFill and color outside the control

This is in addition to the standard color contrast requirements.

Screen reader support

  • AccessibleLabel must be present.
  • FalseText must be present.
  • TrueText must be present.

Low vision support

  • Consider setting ShowLabel to true so that users can quickly determine the toggle value.

Keyboard support