An illuminated toggle or button stack. With two states it draws a rocker — click to flip between the two options. With three or more states it draws a vertical button stack — click any slot to select it. The active slot glows with the style's accent color.
Create a Switch with just a position. ProControls fills in the defaults: two states
labeled OFF and ON, with OFF active at start.
Click the control to flip it.
The states array sets the text on each slot. state is the index
that starts highlighted — 0 means the first item, 1 means the
second. Add a label to identify the control below it.
Pass more than two strings in states and the Switch automatically expands
into a vertical button stack — one glowing button per option. The control grows taller
to fit all the slots. Only one slot can be active at a time.
onChange
The onChange callback fires every time the user clicks a slot. It receives
two arguments: the numeric index of the selected slot (starting at 0) and the string
label of that slot. The ConsolePanel in the example below shows this
output directly on the canvas so you can see it without opening browser DevTools.
sw.state
(the index) or sw.states[sw.state] (the label string). You can also write
to sw.state directly to change the selection programmatically — for example
sw.state = 1 to turn a power switch on.
A compact option picker that scrolls through a list of choices. Two visual styles are available: rotary (default) shows a mechanical drum with serrated teeth on the right — drag up/down or scroll the mouse wheel to spin it. Arrow style shows left/right arrow buttons with a sliding display window.
Create a Selector with a position and an options array. The default style
is 'rotary' — drag the drum up or down, or hover over it and scroll your
mouse wheel to cycle through the options.
state sets which option is selected at the start — it is an index into the
options array, so 0 means the first item, 2 means
the third, and so on. The label caption is drawn below the control.
width and height control the size of the panel.
Set style: 'arrow' to switch to the compact arrow-button layout. Click the
◀ or ▶ buttons to step through options — the new selection slides in from the direction
you traveled. A row of dots at the bottom of the display shows which option you are on.
The scroll wheel also works.
onChange
onChange fires whenever the selected option changes. It receives two
arguments: the numeric index and the option string. onRelease fires once
when the mouse is released after a drag — useful when you only want to act on the final
settled value, not every intermediate step.
wave.state
(index) or wave.options[wave.state] (string). You can write to
wave.state directly to jump to any option without firing callbacks.
A chip panel that lets the user toggle multiple options at once. Each string in
words appears as a rounded pill — click any pill to select or deselect it.
Multiple pills can be active simultaneously. Selected pills glow with the accent color.
Pass a words array and a position. Each word becomes a clickable chip.
Nothing is selected by default — click any chip to toggle it on, click again to turn it
off. Multiple chips can be on at the same time.
Pass a selected array to start with certain chips already highlighted. The
strings in selected must match entries in words exactly. Add a
label to identify the group — double-clicking the label resets the selection
back to its initial state.
Set a fixed height to cap the panel size. When there are more chips than
fit in that height, a thin scrollbar appears automatically along the right edge. Hover
over the control and scroll the mouse wheel to pan through the content.
onChange
onChange fires every time a chip is toggled. It receives three arguments:
the full array of currently selected strings, the word that was just added (or
null), and the word that was just removed (or null). Exactly
one of the last two will be a real string on each click.
fx.selected
— it returns an array of selected strings. You can also write to it:
fx.selected = ['REVERB'] replaces the selection programmatically.
A vertical fader that snaps to a list of string options instead of a continuous range. It looks like an AnalogSlider — same panel, track, and cap — but tick marks appear beside each option and the cap clicks into place as you drag. The scroll wheel also steps through options when you hover.
Pass an options array and a position. The first option sits at the top of
the track, the last at the bottom. Drag the cap or scroll the mouse wheel to step through
the choices. The active option's tick and label glow in the accent color.
state is the index of the option to start on — 0 is the top,
options.length - 1 is the bottom. The label is drawn at the
top of the panel above the track. Width and height auto-size to fit your options, but
you can override them.
Set style: 'button' to swap the default brushed-metal rectangular cap for
a circular button cap with a radial gradient — the same cap used by AnalogSlider's
button style. Everything else behaves the same.
onChange and onRelease
onChange fires on every step while dragging or scrolling. onRelease
fires once when the mouse is released. Both callbacks receive the selected index and the
option string. Use onChange for live feedback and onRelease
when you only care about the final settled value.
mode.value
— it returns the selected option as a string. You can also write to it:
mode.value = 'CHORUS' jumps to that option without firing callbacks.
Use mode.state to get or set by index instead.