Toggle

On/off switch control for binary parameters. Click to switch between two states. Essential for bypass, enable/disable, and mode switching.

Overview

Property	Value
Type	Control
Interaction	Click
States	On / Off
Styles	4 styles available

Styles

Switch

Classic toggle switch that flips left/right. Most versatile style.

• Size: 2×1 grid units
• Best for: Bypass, on/off, enable/disable

Button

Pushbutton that lights up when active. Click to toggle state.

• Size: 2×2 grid units
• Best for: Trigger actions, mode selection, prominent toggles

LED

LED indicator that shows on/off state. Compact status display.

• Size: 1.5×1.5 grid units
• Best for: Status indicators, small spaces, subtle toggles

Checkbox

Traditional checkbox style familiar from software settings.

• Size: 1.5×1.5 grid units
• Best for: Settings, options lists, multiple toggles

Properties

Property	Type	Default	Description
defaultValue	boolean	-	Initial state (true = on)
labelPosition	string	below	left, right, above, below

Sizes

Style	Grid Units	Notes
Switch	2×1	Horizontal, compact
Button	2×2	Square, prominent
LED	1.5×1.5	Small, indicator-style
Checkbox	1.5×1.5	Small, settings-style

When to Use Toggles

✅ Use toggles for:

• Bypass/enable controls
• Feature on/off switches
• Mode A/B selection
• Sync on/off
• Any binary (two-state) parameter

❌ Don’t use toggles for:

• Continuous parameters → use Knob
• More than 2 options → use multiple toggles or knob with steps

Style Selection Guide

Use Case	Recommended Style
Bypass	Switch or Button
Feature enable	Switch
Mode selection	Button (lights up when active)
Status indicator	LED
Settings/options	Checkbox
Prominent toggle	Button
Space-limited	LED or Checkbox

Tips

Bypass Controls

• Use Switch style for classic bypass
• Place in consistent location (top-right common)
• Label clearly: “BYPASS” or “ON/OFF”

Mode Selection (2 modes)

• Use Button style
• Active mode lights up
• Clear labels for each mode

Multiple Toggles

When you have several toggles:

• Use consistent style for all
• Align vertically or horizontally
• Group related toggles together

LED as Status Indicator

LED style works when:

• User doesn’t need to interact (status only)
• Space is very limited
• Showing active state is primary purpose

Grouping Related Toggles

For mode selection with 3+ options, use multiple button toggles:

[CLEAN] [CRUNCH] [LEAD]
   ✓       ○        ○

Only one active at a time (radio-button behavior).

Example Configurations

Bypass Switch

style: switch
defaultValue: false
labelPosition: right
label: "BYPASS"

Sync Toggle

style: button
defaultValue: true
labelPosition: below
label: "SYNC"

Feature Enable

style: led
defaultValue: false
labelPosition: right
label: "Sidechain"

Label Position Tips

Position	Best For
Below	Standalone toggles
Right	Horizontal lists
Left	Right-aligned layouts
Above	Bottom-positioned toggles

Keep labels short - one word is ideal:

• “BYPASS” not “Bypass Effect”
• “SYNC” not “Sync to Host”
• “ON” not “Enable Feature”