Move toggle switch before the label

Previously, we positioned the toggle switch to the right of the label, aligning it all the way to the far right. Unfortunately, this approach led to an undesirable gap between the label and the toggle switch. To solve this issue, we have now adopted the following best practices for enhancement.

Best practices

  • The position of the toggle switch must be decided by the context.

  • Place the toggle switch before the label when there is excessive gap between label and toggle switch.

  • Don't place the toggle switch before the label when it affects the overall alignment.

  • Clicking on label should toggle the switch.

Refer Switch documentation to learn more.

Do’s and Don’ts

🚫 Don'ts

before.png
Caution - Excessive gap between label and toggle switch

Screenshot 2023-09-29 at 5.46.53 PM.png
Caution - Excessive gap between label and toggle switch

Do's

Screenshot 2023-09-29 at 5.17.25 PM.png
Do - Toggle switch has been placed before the label

Screenshot 2023-09-23 at 2.25.18 AM.png
Do - Toggle switch has been placed before the label

Screenshot 2023-09-23 at 2.36.20 AM.png
If we move the toggle switch before the label it will break overall alignment, So placing the toggle switch to right of label is ok here.

https://github.com/bigbinary/neeto-engineering-ui-ux/issues/39