Labels change in InputSwitch


Topic: Labels change in InputSwitch

Codewave pro asked 6 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 6 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+https://oauth2:YOUR_TOKEN_GOES_HERE@git.mdbootstrap.com/mdb/react/re-pro.git#next" 

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}`;

this.setState({

[switchNumber]: !this.state[switchNumber]

});

}

render() {

return (

<Fragment>

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

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

</Fragment>

);

}

}

export default App;

If you have more sugesstion, please post them bellow.

Best,

Ania


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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