StandardPinPadDialog

Displays a PIN pad dialog for text and voice entry of numeric PIN codes

import { StandardPinPadDialog } from "@roku-sdk/components";

StandardPinPadDialog(props: IStandardPinPadDialogProps): JSX.Element

Description

Displays a PIN pad dialog for text and voice entry of numeric PIN codes.

StandardPinPadDialog is a pre-built dialog similar to the legacy PinDialog node, but includes voice entry of numeric digits through its internal DynamicPinPad and VoiceTextEditBox nodes.

Parameters

Name	Type	Description
`props`	IStandardPinPadDialogProps

Example

const [showPinPad, setShowPinPad] = createSignal(false);
const [pin, setPin] = createSignal("");

{showPinPad() && (
    <StandardPinPadDialog
        title="Enter PIN"
        message={["Please enter your 4-digit PIN:"]}
        pin={pin()}
        buttons={["Submit", "Cancel"]}
        onButtonSelected={(index) => {
            if (index === 0) {
                console.log("PIN entered:", pin());
            }
            setShowPinPad(false);
        }}
        onWasClosed={() => setShowPinPad(false)}
    />
)}

Types

IStandardPinPadDialogProps

Properties for the StandardPinPadDialog component.

Extends IStandardDialogProps with PIN pad-specific fields for numeric entry.

Name	Type	Description
`buttons?`	`string[]`	List of button labels to display in the button area at the bottom of the dialog. Minimize the number of buttons to ensure visibility without scrolling.
`message?`	`string[]`	One or more blocks of text describing the data to be entered. Each string in the array is displayed as a separate block of text. Minimize message length to avoid automatic scrollbar.
`onPin?`	`EventHandler<string>`	Fired whenever the PIN in the text edit box changes (on each digit entry). See below.
`pin?`	`string`	The entered PIN value displayed in the text edit box. Updated with the currently entered value as the user enters each digit.
`title?`	`string`	The title displayed at the top of the dialog.

Extends IStandardDialogProps.

IStandardPinPadDialogProps.onPin

Fired whenever the PIN in the text edit box changes (on each digit entry). The handler receives the full current PIN string entered by the user.

Use this to react to live input — for example to validate the PIN length or enable/disable action buttons based on what the user has entered so far.