Waveform Selector

waveform-selectorControls

A waveform control should show the shape, not make the user decode four tiny text facets. The closed state keeps the selected curve and name visible; the popover gives every waveform a proper preview without consuming permanent panel width. Arrow keys traverse the visual grid, Escape restores focus, and useWaveformParam converts integer DSP enums to stable waveform ids and back.

Waveform

The selector owns the choice. The oscillator or LFO receives the value and remains the source of truth.

Install

Copies the source into your project. Anything it depends on comes with it.

$ npx shadcn add @syntho-ui/waveform-selector

Pulls in

waveformscontrol-theme

First time? Add the registry to your components.json once:

components.json

{
  "registries": {
    "@syntho-ui": "https://engine.syntho.app/r/{name}.json"
  }
}

Usage

Controlled or uncontrolled, whichever suits the surrounding state.

example.tsx

import { WaveformSelector, useWaveformParam } from "@/components/ui/waveform-selector"

const waveform = useWaveformParam({
  value: params.oscType,
  onValueChange: (value) => setParam("oscType", value),
  waveforms: ["sine", "sawtooth", "square", "triangle"],
})

<WaveformSelector {...waveform} label="Waveform" />

Props

Prop	Type	Default	Description
value	"sine" \| "triangle" \| "sawtooth" \| "square" \| "random"	—	Selected waveform id.
onValueChange	(waveform: Waveform) => void	—	Called once when a waveform is selected.
options	readonly (Waveform \| WaveformOption)[]	four periodic waveforms	Visible waveforms, labels, ordering, and disabled states.
label / labelHidden	string / boolean	"Waveform" / false	Accessible field label and its visual visibility.
disabled	boolean	false	Disable the trigger and selection.

Interaction

Open Click the waveform, or press ArrowUp or ArrowDown while the trigger is focused.
Navigate Arrow keys move through the visual grid and skip disabled waveforms.
Choose Press Enter or Space. The popover closes and focus returns to the trigger.
Dismiss Press Escape or click outside without changing the current waveform.
Assistive tech The trigger exposes its current value and the popover is announced as a single-select listbox.

All controls Start building