New here? See the
Getting Started page for
HTML setup, script tags, a minimal sketch, and the common options table.
Selectors Input
Switch Input
An illuminated discrete selector. Two states renders as a rocker toggle — click to flip. Three or more states renders as a vertical button stack — click any slot to select it. The active slot glows with the style's accent color. Double-click any slot or the label to reset to the initial state.
new Switch(opts)
Options
| Option | Type | Default | Description |
|---|
| states | string[] | ['OFF','ON'] | Array of state labels. 2 entries = rocker. 3+ entries = selector stack. |
| state | number | 0 | Index of the initially active state. |
| springDefault | number | state | State index to restore on double-click reset. Defaults to state. Useful when the control is rebuilt dynamically and you want reset to always target a fixed index. |
| width | number | 48 | Panel width in pixels. |
| height | number | auto | Defaults to 70 for 2-state; states.length × 26 + 20 for N-state. |
| onChange | function | null | onChange({index, label}[, control]) — called on every click. |
| onRelease | function | null | onRelease({index, label}[, control]) — called on mouse/touch release. |
Reading state
sw.state // active index (readable/writable)
sw.states[sw.state] // active label string
Two-state rocker
editable — changes update the preview
N-state selector
editable — changes update the preview
Selector Input
A multi-style option selector. Set style to choose the visual style. Scroll wheel and touch work for all styles. Double-click the selection display or the label to reset to the initial option (double-clicking the arrow buttons or gear wheel advances state as normal).
new Selector(opts)
Options
| Option | Type | Default | Description |
|---|
| options | string[] | ['A','B','C'] | Array of option labels. |
| state | number | 0 | Initial selected index into options. |
| style | string | 'rotary' | Visual style — 'rotary' or 'arrow'. See style descriptions below. |
| width | number | 140 | Total panel width in pixels. |
| height | number | 40 | Panel height in pixels. |
| onChange | function | null | onChange({index, label}[, control]) — called whenever the selection changes. |
| onRelease | function | null | onRelease({index, label}[, control]) — called on mouse/touch release. |
| springBack | boolean | false | When true, the selection snaps back to its initial state after springDuration seconds. |
| springDuration | number | 1.0 | Seconds before snapping back when springBack is enabled. |
| label | string | '' | Caption drawn below the panel. |
| disabled | boolean | false | Disables interaction and renders a translucent overlay. |
| theme | object | {} | Partial theme override. See Themes. |
Properties
| Property | Description |
|---|
.state | Current selected index (read/write). |
.options | Array of option labels (read/write). |
Style — rotary (default)
A mechanical drum-style selector inspired by vintage rotary counters. A display window shows the selected option; the drum's serrated edge is exposed on the right — horizontal ridges scroll as the drum rotates, giving a tactile feel. Adjacent options are visible while scrolling. Drag up/down, scroll wheel, or touch.
Teeth column sizing: width is max(14, round(height × 0.28)) px. The display window occupies the remaining panel width to the left.
editable — changes update the preview
Style — arrow
A compact left/right arrow selector. Pressing either arrow button steps to the adjacent option; the new selection slides into the display window from the direction of travel. Scroll wheel also works.
editable — changes update the preview
A multi-select chip panel. Each string in words is displayed as a rounded pill inside a box. Click any pill to toggle its selection; multiple pills can be selected simultaneously. Double-click the label to reset to the initial selection.
new TagSelector(opts)
Options
| Option | Type | Default | Description |
|---|
| words | string[] | [] | Array of strings to display as selectable chips. Each string may contain spaces (multi-word phrases are treated as one chip). |
| selected | string[] | [] | Initially selected words. Must be members of words. |
| width | number | 200 | Panel width in pixels. Chips wrap to new rows when they exceed this width. |
| height | number | auto | Panel height. Omit to auto-size to fit all chips. Provide a fixed value to enable vertical scrolling when chips overflow — a thin scrollbar appears automatically and mouse-wheel or drag scrolls the content. |
| label | string | '' | Caption shown at the bottom of the panel. Double-click it to reset selection. |
| onChange | function | null | onChange({selected, added, removed}[, control]) — called on each toggle. Exactly one of added / removed is non-null per click; both are null on a label double-click reset. |
| onRelease | function | null | onRelease({selected, added: null, removed: null}[, control]) — called on mouse/touch release. |
| disabled | boolean | false | Disables interaction and renders a translucent overlay. |
| theme | object | {} | Partial theme override. See Themes. |
Properties
| Property | Description |
|---|
.selected | Getter — returns current selection as string[]. Setter accepts a string[] to programmatically set selection. |
.words | Array of all chip strings (read/write). Reassigning marks layout dirty so chips reflow on next draw. |
Example
editable — changes update the preview
SliderSelector Input
A vertical fader that snaps to discrete string options. It looks and behaves like an AnalogSlider — same panel, track, and brushed-metal cap — but instead of a continuous numeric range the slider clicks into one of the provided option strings. Tick marks at each position are drawn to the right of the track, and the active option's tick and label are highlighted in the accent colour. Scroll-wheel steps through options when hovering. Double-click the cap to reset to the initial state.
new SliderSelector(opts)
Options
| Option | Type | Default | Description |
|---|
| options | string[] | [] | The ordered list of selectable strings. Index 0 appears at the top of the track, the last index at the bottom. |
| state | number | 0 | Initial selected index. |
| style | string | 'knob' | 'knob' — brushed-metal rectangular fader cap. 'button' — circular cap with a radial gradient, matching the AnalogSlider button style. |
| x, y | number | 20, 20 | Canvas position. |
| width | number | auto | Panel width. Defaults to a size that fits the longest option label with padding. |
| height | number | auto | Panel height. Defaults to enough vertical space for all options at 22 px spacing (min 80 px). |
| label | string | '' | Caption rendered at the top of the panel. |
| onChange | function | null | onChange({index, label}[, control]) — called whenever the selection changes during drag or scroll. |
| onRelease | function | null | onRelease({index, label}[, control]) — called on mouse release. |
| disabled | boolean | false | Disables interaction and renders a translucent overlay. |
| theme | object | {} | Partial theme override. See Themes. |
Properties
| Property | Description |
|---|
.state | Current selected index (read/write). |
.value | Getter — returns options[state] as a string. Setter accepts a string and updates state to its index (no-op if not found). |
.options | The options array (read/write). Reassign to change the available choices; update .state if needed. |
Interaction
| Gesture | Effect |
|---|
| Drag cap | Moves the cap; snaps to the nearest option tick as you drag. |
| Double-click cap | Reset to the initial state. Fires onChange and onRelease if the state changes. |
| Scroll wheel | Steps one option up or down when hovering over the control. |
Example
editable — changes update the preview