Dialpad

Canonical

<div x-data="{ dialed: '', pressed: null,
    press(k) { this.dialed = (this.dialed + k).slice(0, 24); },
    flash(k) { this.pressed = k; setTimeout(() => { if (this.pressed === k) this.pressed = null; }, 120); } }"
    x-on:keydown.window="if (/^[0-9*#]$/.test($event.key)) { press($event.key); flash($event.key); }">
    <div x-text="dialed || 'Enter a number'"></div>
    <koala-dialpad />
</div>

Click a key or type on the keyboard — each key flashes (a filled circle that nudges smaller) and appends its character. The host owns the entered value and any place-call / backspace controls; the component is just the keys.

Variants

None — the keypad is a single fixed form (1–9, *, 0, #, with the phone letters beneath). Layout and behaviour don't vary by surface; the only softphone is the communications rail.

States

• Rest — flat, no fill, no shadow.
• Hover — a soft surface circle.
• Pressed — a surface-container filled circle that nudges smaller (scale-90), on mouse :active or when the host sets pressed to the key (keyboard). No focus ring.

Props

The component takes no attributes; instead it binds to two members the host Alpine x-data must provide (so the dial logic stays with the dialer):

• press(key) — called with the pressed character on click.
• pressed — the currently-flashed key; the host sets it on a physical-keyboard press so the on-screen key lights up to match.

Do & don't

• Do keep the entered-number display, backspace and Call button in the host — the component is only the keys.
• Don't hand-roll a keypad; compose this component so the Android-style keys and press behaviour stay consistent.