Labels change in InputSwitch

Topic: Labels change in InputSwitch

Codewave pro asked 4 years ago

How to change On/Off text on MD InputSwitch to Yes/No? And if it is not possible now, when can we expect this option?

Anna Morawska staff answered 4 years ago

Hi Codewave,

indeed, it is not possible right now, thank you for bringing our attention to it. I've already changed it in our package, it will be updated on Monday. For now, you can test it by updating your mdbreact using branch #next.  Please add  #next to your gitURI as show bellow and run  "npm update mdbreact"

"mdbreact": "git+" 

Form then it will be possible to add labelLeft and labelRight props and pass a String to it to define your custom labels. An example below: 

import React, { Component, Fragment } from "react";

import { InputSwitch } from "mdbreact";

class App extends Component {

state = {

switch1: true,

switch2: false


handleSwitchChange= (nr) => {

let switchNumber =`switch${nr}`;


[switchNumber]: !this.state[switchNumber]



render() {

return (


<InputSwitch labelLeft="No" labelRight="Yes" checked={this.state.switch1} onChange={this.handleSwitchChange} />

<InputSwitch checked={this.state.switch2} onChange={this.handleSwitchChange} />





export default App;

If you have more sugesstion, please post them bellow.



Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.1
  • Device: Desktop
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: No