Versions Compared

Old Version 2

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version Current

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Toggle Switch

Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11600-78630&t=ftfrOGkPzlG2GaTo-1

Overview

  • The Toggle Switch Component is a form control that offers a simple on/off choice.
  • It is used for boolean settings such as enabling or disabling features.
  • The switch provides clear visual feedback compared to checkboxes.
  • It saves space compared to radio buttons for binary options.

...

  • authorizationDisable – Specifies a policy set that determines when the component should be disabled based on user permissions. For example, setting to "adminOnlyEditPolicy" will disable the toggle for non-admin users while allowing admins to change its state.
  • Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11600-78630&t=ftfrOGkPzlG2GaTo-1
  • Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id3/4-toggle

Guidelines

Usage

  • Always design the toggle for fast and intuitive input with minimal clicks.
  • Use for binary, immediate preferences or feature flags; set intent with value and a distinct reset via defaultValue.
  • Persist preference-style choices across sessions by enabling saveInLocalStorage.
  • Remove from view when not applicable using hidden (remains part of the form data if needed).
  • Communicate permission limits without removing context by disabling via authorizationDisable; optionally present as readonly when edits aren’t allowed.

...

DoDon’t
Set a safe initial value and a distinct defaultValue for resets.Reuse one value for both current and reset, causing unexpected form state after reset.
Enable saveInLocalStorage for persistent preferences.Force users to reconfigure the same preference every session.
Use hidden to remove irrelevant controls from view and reading order.Leave a visible but meaningless control on screen.
Prefer authorizationDisable + disabled/readonly to show blocked settings.Hide controls that users should be aware exist but cannot change.
Submit with a clear dataField and correct controlsRequestType.Send the boolean in the wrong channel (e.g., header instead of body).
Handle changes immediately with ON_VALUE_CHANGE.Defer processing until an unrelated action.
Initialize logic and visibility on mount with ON_INIT (or user mode with ON_INIT_BASED_ON_USER_VIEW).Wait for the first user interaction to set up state.
Expose a stable test hook via dataTestId.Depend on brittle selectors tied to DOM structure.
Clean up listeners/timers with ON_DESTROY.Leave background work running after navigation.

...