---
title: "JavaScript Toggle Button | LemonadeJS v5"
description: "LemonadeJS v5 archive. Discover the LemonadeJS Toggle, a reactive JavaScript toggle component with icon support. Compatible with Vue, React, and Angular."
source: https://lemonadejs.com/docs/v5/plugins/toggle/
---
# JavaScript Toggle Button
The LemonadeJS Toggle component provides a reactive and customizable solution for managing binary states in your web applications. With support for Material Icons and text labels, it offers a clean interface for toggle functionality. As a framework-agnostic JavaScript plugin, it integrates seamlessly with Vue, React, and Angular.
## Documentation
### Installation
```bash
npm install @lemonadejs/toggle
```
### Settings
| Attribute | Description |
|---------------------|-------------------------------------------------------|
| text?: String | The text label displayed next to the toggle. |
| icon?: String | Material icon name (e.g., 'mic', 'videocam'). |
| value?: Boolean | The current toggle state. |
| name?: String | The attribute `name` assigned to the input element. |
| disabled?: Boolean | Disables the functionality of the toggle. |
| onchange?: Function | Callback when the toggle state changes. |
### Instance Properties
| Property | Description |
|------------------|----------------------------------------------------------|
| text: String | The text label displayed next to the toggle. |
| icon: String | Material icon name. |
| value: Boolean | Current toggle state. |
| name: String | The name attribute of the input element. |
| disabled: Boolean| Whether the toggle is disabled. |
| checked: Boolean | Current checked state of the underlying checkbox (read-only). |
| el: HTMLElement | The root DOM element. |
## Examples
### JavaScript Toggle Example
```html
```
```javascript
import Toggle from '@lemonadejs/toggle';
import '@lemonadejs/toggle/dist/style.css'
export default function App() {
this.value = false;
return render => render`
Value: ${this.value}
`
}
```
```jsx
import React, { useRef } from 'react';
import Toggle from '@lemonadejs/toggle/dist/react';
import '@lemonadejs/toggle/dist/style.css'
export default function App() {
const myRef = useRef();
return (
);
}
```
```vue
```
### Basic HTML Example
```html
```
### Render as Web Component
```html
```
### Toggle with onchange Event
```html
```