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.

Bone / Studio

Loading interactive preview…

Planar / Flat

Loading interactive preview…

Midnight / Minimal

Loading interactive preview…

Ember / Vintage

Loading interactive preview…

Ink / Studio

Loading interactive preview…

Mint / Flat

Loading interactive preview…

Install

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

$ pnpm dlx shadcn@latest add @pluginui/core-waveform-selector

Pulls in

waveformscontrol-theme

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

components.json

{
  "registries": {
    "@pluginui": "https://pluginui.com/r/{name}.json"
  }
}

Usage

Connect the documented props to your application or host.

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