# Switch

- category: Components
- chinese: 开关
- type: Basic

---

## Usage

`Switch` is a switch button component with status switching.


## API


| Attribute      | Description                                                              | Type            | Default |
| -------------- | ------------------------------------------------------------------------ | --------------- | ------- |
| disabled       | Is the switch interactive?                                               | boolean         | true    |
| checked        | Turn on or off（Controlled usage, Need to cooperate with onValueChange） | boolean         | false   |
| defaultChecked | Default selection（uncontrolled usage）                                  | boolean         | false   |
| onValueChange  | call this function when Switch changes                                   | function(value) | null    |

### Usage in controlled or uncontrolled

All input and interaction class components have controlled usage and uncontrolled usage.

- Controlled usage: component status is affected by external incoming props. The external props changes, so that the components will change, such as:

````js
constructor() {
    super();
    this.state = {
        checked: true
    }
}
change = (value) => {
    this.setState({
        checked:!value
    });
}
//...
render(){
    return (<Switch checked={this.state.checked} onValueChange={this.change}/>)
}
````

- Uncontrolled usage: The component itself changes freely and changes what is externally changed through the event, such as:

````js
change = (value) => {
    console.log('switch change to: ',value);
}
//...
render(){
    return (<Switch defaultChecked={true} onValueChange={this.change}/>)
}
````


## The Other
- Chat with <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨[yichen]</a> in Dingtalk desktop App <a href='https://tms.dingtalk.com/markets/dingtalk/download'>Download</a>
- DingTalk Group

<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />