Use toggles to immediately switch between two states (e.g. ON / OFF)
Basic size
```js
initialState = {
isOn: false
};
const onChange = (e) => setState({isOn: !state.isOn});
Enable sound notifications for customers
```
```js noeditor
initialState = {
isOn: true
};
const onChange = (e) => setState({isOn: !state.isOn});
Enable sound notifications for customers
```
Compact size
```js
initialState = {
isOn: true
};
const onChange = (e) => setState({isOn: !state.isOn});
Enable sound notifications for customers
```
```js noeditor
initialState = {
isOn: true
};
const onChange = (e) => setState({isOn: !state.isOn});
Enable sound notifications for customers
```
Based on component state
```js
Enable sound notifications for customers
```
```js noeditor
Enable sound notifications for customers
```
Best practices
- Don’t require users to press a button to confirm the change.
- If you need users to press a button, use checkboxes instead.
- Write clear labels to make the choice less ambigous.
- Use positive and active wording for labels