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

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

live

<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/toggle/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/toggle/dist/style.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

<div id='root'></div>

<script>
function Component() {
    this.value = false;
    return render => render`<div>
        <p>Value: ${this.value}</p>
        <Toggle text="Enable notifications" icon="notifications" :bind="this.value" />
    </div>`
}
lemonade.render(Component, document.getElementById('root'));
</script>
</html>

import Toggle from '@lemonadejs/toggle';
import '@lemonadejs/toggle/dist/style.css'

export default function App() {
    this.value = false;
    return render => render`<div>
        <p>Value: ${this.value}</p>
        <Toggle text="Enable notifications" icon="notifications" :bind="this.value" />
    </div>`
}

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 (<div>
        <Toggle ref={myRef} text={'Enable notifications'} icon={'notifications'} />
    </div>);
}

<template>
    <Toggle text="Enable notifications" icon="notifications" />
</template>

<script>
import Toggle from '@lemonadejs/toggle/dist/vue';
import '@lemonadejs/toggle/dist/style.css'

export default {
    name: 'App',
    components: {
        Toggle
    },
}
</script>

Basic HTML Example

live

<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/toggle/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/toggle/dist/style.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

<div id='root'></div>

<script>
Toggle(document.getElementById('root'), {
    text: 'Microphone',
    icon: 'mic'
});
</script>
</html>

Render as Web Component

live

<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/toggle/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/toggle/dist/style.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

<lm-toggle text="Camera" icon="videocam" value="true"></lm-toggle><br>
<lm-toggle text="Microphone" icon="mic" value="false"></lm-toggle>

</html>

Toggle with onchange Event

live

<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/toggle/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/toggle/dist/style.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

<div id='root'></div>

<script>
Toggle(document.getElementById('root'), {
    text: 'Dark mode',
    icon: 'dark_mode',
    onchange: function(instance, value) {
        console.log('Toggle changed to:', value);
    }
});
</script>
</html>