For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Log inSign up
Support
GuidesReferenceClick-to-Call
GuidesReferenceClick-to-Call
  • Core
    • Overview
  • Entities
    • SignalWire
    • Address
    • Participant
    • ClientPreferences
    • SelfCapabilities
    • SelfParticipant
    • User
    • WebRTCCall
  • Web Components
    • Overview
    • sw-audio-level
    • sw-call-controls
    • sw-call-dialpad
    • sw-call-media
    • sw-call-provider
    • sw-call-status
    • sw-call-widget
    • sw-click-to-call
    • sw-device-selector
    • sw-directory
    • sw-local-camera
    • sw-participant-controls
    • sw-participants
    • sw-self-media
    • sw-ui-alert
    • sw-ui-background
    • sw-ui-call-layout
    • sw-ui-content-drawer
    • sw-ui-control-bar
    • sw-ui-dialpad
    • sw-ui-dropup
    • sw-ui-icon
    • sw-ui-modal
    • sw-ui-responsive-container
    • sw-ui-split-button
    • sw-ui-transcript-view
LogoLogoSignalWire Docs
Log inSign up
Support
On this page
  • class: SwUiDialpad, sw-ui-dialpad
  • Fields
  • showCallButton
  • allowText
  • placeholder
  • Attributes
  • CSS Properties
  • CSS Parts
  • Events
Web Components

sw-ui-dialpad

|View as Markdown|Open in Claude|
Was this page helpful?
Edit this page
Previous

sw-ui-dropup

Next
Built with

Presentational 12-key telephone keypad (0-9, *, #) for entering phone numbers, sending DTMF tones, or capturing free-text destinations.

1<sw-ui-dialpad></sw-ui-dialpad>

Pure UI primitive — no call logic, no SDK coupling. Use <sw-call-dialpad> for the SDK-aware version that automatically forwards digits to an active call.

Each key shows the digit plus the standard ITU-T E.161 letter mapping (2 → ABC, 3 → DEF, …). Two long-press shortcuts are built in:

  • Long-press 0 → inserts + (international prefix).
  • Long-press the backspace button → clears the entire buffer.

Set allow-text to let users type into the display field directly (useful for SIP URIs or destination addresses that aren’t strictly digits). Set show-call-button to render an inline “Call” button.

Class: SwUiDialpad · Module: packages/web-components/src/components/UI/controls/sw-ui-dialpad.ts

class: SwUiDialpad, sw-ui-dialpad

Fields

showCallButton
booleanDefaults to false

Whether to display the call button below the keypad.

allowText
booleanDefaults to false

Allow free-text input in the display field (e.g., SIP URIs, vanity letters). Keypad buttons still append DTMF digits.

placeholder
stringDefaults to 'Enter number'

Placeholder text shown in the digit display input.

Attributes

NameFieldInherited From
show-call-buttonshowCallButton
allow-textallowText
placeholderplaceholder

CSS Properties

NameDefaultDescription
--interactive-button-primary-bg#044ef4Primary accent color.
--interactive-button-primary-hover#0342cfPrimary color on hover.
--interactive-status-success#22c55eBackground of the “Call” button.
--interactive-button-destructive-bg#dc2626Backspace / hangup color.
--bg-surface#181a28Container background.
--fg-default#f0f0f4Digit / display text color.
--fg-muted#a0a0aaLetter-mapping subtext color.
--border-defaultrgba(255,255,255,0.12)Borders & dividers.

CSS Parts

NameDescription
containerOuter dialpad container.
displayNumber / text display field.
keypadGrid of digit keys.
keyIndividual digit button.
key-pressedDigit button while pressed.
call-buttonThe call button (only when `show-call-button`).

Events

NameDetailDescription
sw-dial—The call button was pressed.
sw-dialpad-backspace—Backspace was pressed (or long-pressed to clear).
sw-dialpad-input—Free-text input changed (only when allow-text is set).
sw-digit-press—A digit button was pressed.