Skip to main content

 

Patterns

 

Applies only to Traditional Web Apps

 

OutSystems

ToggleButton

  • Edit
  • Prompts end users to choose between two states.

    Use the Toggle Button and prompt end users to choose between two incompatible states, selecting a preference. There is always a default value as toggles are digital on/off switches.

    How to use

    After placing the Block on your Web Screen, drag a checkbox inside the placeholder and the pattern will automatically use it.

    1. Drag the ToggleButton pattern into the preview.

    2. Set a variable of type Boolean to the checkbox.

    3. Publish and test.

    Input Parameters

    Input Name Description Type Mandatory Default Value
    ExtendedClass Add custom style classes to this Block. Text False None

    Layout and Classes

    CSS Selectors

    Element CSS Class Description
    .toggle-button .toggle-button-checked Is the Class Selector to style the Toggle Button when the Boolean Variable is true
    .toggle-button .toggle-button-disabled Is the Class Selector to style the Toggle Button when is disabled
    .toggle-button .toggle-button:after Is the Pseudo Element Selector to style the circle of Toggle Button

    Advanced Use Case

    Disable the ToggleButton Pattern

    1. Drag the ToggleButton pattern into the preview.

    2. Set a variable of type boolean to the checkbox.

    3. In the Checkbox, set the parameter Enabled to False.

    4. Publish and test.

    • Was this article helpful?