Skip to content

[Switch] disabled={true} is not following the current MD guidelines #24944

Description

@sarod

Switch component with "disabled={true}" is greyed out this is not following the material design guideline colors.

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

In Material UI disabled switches are greyed out
image

Expected Behavior 🤔

It should follow current material design guideline and use a dimmed out color which is much more readable
image

Steps to Reproduce 🕹

Steps:

  1. Open code sandbox https://codesandbox.io/s/material-ui-issue-forked-w85sm?file=/src/Demo.js
  2. The switches are disabled and greyed out.
  3. Try to guess which one is checked...

Context 🔦

Using grey color for disabled switches makes it very difficult to distinguish checked vs unchecked status only the position switch remains to make a distinction.

Metadata

Metadata

Assignees

No one assigned

    Labels

    design: materialThis is about Material Design, please involve a visual or UX designer in the processready to takeHelp wanted. Guidance available. There is a high chance the change will be acceptedscope: switchChanges related to the switch.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions