MDB inline checkbox - Does MDB support these? - Material Design for Bootstrap

Topic: MDB inline checkbox - Does MDB support these?

David J asked 5 years ago

Does MDB React support this style of toggle switch as exists in boostrap? I have checked the documentation and do not see it. enter image description here

Add comment

Aliaksandr Andrasiuk staff answered 5 years ago

1 0 Best answer

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.

Add comment

Christian Aichner pro answered 5 years ago

0 0 Best answer

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

Add comment

David J answered 5 years ago

0 0 Best answer

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

Add comment