Audio UI
A rocker, as on a mixer's or a synth's panel: two sides, the one pressed down sunk into the panel. Underneath it is a switch, with its role, Space to flip it, and its form value (name). Its shape follows the style, from a pill to a square.
Installation
pnpm dlx shadcn@latest add @audio-ui/rocker-switch
Usage
import { RockerSwitch } from "@/components/audio-ui/rocker-switch";
<RockerSwitch aria-label="Power" checked={power} onCheckedChange={setPower} />
<RockerSwitch aria-label="Phase invert" offLabel="Ø" onLabel="Ø" orientation="horizontal" size="sm" />API reference
Props · 6
Whether it is on, when it is held outside.
Whether it starts on, when it keeps its own state.
What the on and the off side read.
Stood up, on at the top, or laid down, on at the right.
Its size.
Takes no input.