Pipecat UI
Components

DTMF Keypad

Telephone keypad that sends DTMF tones over the session.

Open in Storybook

Installation

pnpm dlx shadcn@latest add @pipecat/dtmf-keypad

Usage

import { DTMFKeypad } from "@/components/pipecat/dtmf-keypad";

// Buffered (default): edit the sequence, then send it in one call
<DTMFKeypad onToneSent={(seq) => console.log(seq)} />

// Immediate: every key press sends right away (live IVR menus)
<DTMFKeypad mode="immediate" />

Key presses play a synthesized dual-tone as local feedback (no audio assets). The connected keypad is disabled until the transport is ready and requires a bot with DTMF support (RTVI 2.0.0+); send failures surface via onError.

Key props

PropTypeDescription
mode"buffered" | "immediate"Dispatch behavior
noToneFeedback / toneVolumePress-feedback tone
noSubLabelsbooleanHide the ABC/DEF letters
value / defaultValue / onValueChangeControlled/uncontrolled buffer
onToneSent / onErrorSend lifecycle callbacks

On this page