Hi,

As Christian Aichner mentioned you can customize the component's styles.

E.g., I customized Switch to be quite similar to the one you asked for:

.lever {
  height: 2.5rem !important;
  width: 3.5rem !important;
  border-radius: 0.5rem !important;
}

.lever:after {
  top: 0 !important;
  height: 2.5rem !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
}

.switch label input[type='checkbox']:checked + .lever::after {
  left: 2.2rem !important;
}

Hope I could help.

Best regards.

The documentation makes no mention of how to customize the Switch.

Hello David,

as far as I know, these are called "Switch". You can modify them yourself by using simple CSS - if you want them to look like those in the picture you provided.

Documentation: https://mdbootstrap.com/docs/react/forms/switch/

Have a nice day!

Best regards, Chris