---
title: "JavaScript Switch Button | LemonadeJS v5"
description: "LemonadeJS v5 archive. Discover the versatility of the LemonadeJS Switch, a dynamic and intuitive JavaScript plugin designed to serve as a toggle component."
source: https://lemonadejs.com/docs/v5/plugins/switch/
---
# JavaScript Switch Button
The LemonadeJS Switch component offers a dynamic and intuitive solution for managing binary states within your web applications. As a versatile and framework-agnostic JavaScript plugin, it seamlessly integrates with popular frameworks like Vue, React, and Angular. This feature-packed Switch component simplifies the implementation of toggle functionality, providing a streamlined user interface for binary choices.
## Documentation
### Installation
```bash
npm install @lemonadejs/switch
```
### Settings
| Attribute | Description |
|--------------------|------------------------------------------------------|
| text?: String | The displayed text. |
| value?: Any | The current value of the component. |
| name?: String | The attribute `name` assigned to the switch element. |
| disabled?: Boolean | Disables the functionality of the switch. |
## Examples
### JavaScript Switch Example
```html
```
```javascript
import Switch from '@lemonadejs/switch';
import '@lemonadejs/switch/dist/style.css'
export default function App() {
this.value = false;
return render => render`
Value: ${this.value}
`
}
```
```jsx
import React, { useRef } from 'react';
import Switch from '@lemonadejs/switch/dist/react';
import '@lemonadejs/switch/dist/style.css'
export default function App() {
const myRef = useRef();
return (
);
}
```
```vue
```
### Basic HTML Example
```html
```
### Render as Web Component
```html
```
## Related Tools
- [JavaScript Toggle](/docs/v5/plugins/toggle/) - Additional toggle and switch UI patterns