DynamicPinPad

Voice-enabled numeric PIN pad for standalone on-screen entry (not inside a dialog)

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

DynamicPinPad(props: IDynamicPinPadProps): JSX.Element

Description

Voice-enabled numeric PIN pad for standalone on-screen entry (not inside a dialog).

Parameters

Name	Type	Description
`props`	IDynamicPinPadProps

Types

IDynamicPinPadProps

Properties for the DynamicPinPad component.

DynamicPinPad is similar to the legacy PinPad node but adds voice entry functionality. It enables text and voice entry of numeric characters and is typically used for short PIN codes. The key layout is fixed based on the node's pre-built Key Definition File.

This wrapper extends the native DynamicPinPad node via PinPadExt, forwarding text-edit-box styling fields to the internal VoiceTextEditBox.

Example

<DynamicPinPad
  id="pinpad"
  text={pin()}
  hintText="Enter PIN"
  maxTextLength={4}
  secureMode
  onText={setPin}
  translation={[80, 200]}
/>

Name	Type	Description
`centerUnderscores?`	`boolean`	Centers underscore placeholders within the text box.
`disableVoiceUnderscoreControl?`	`boolean`	Disables voice underscore control in the internal text edit box.
`hintText?`	`string`	Placeholder text shown when empty.
`hintTextColor?`	`string`	Color of the hint text.
`maxTextLength?`	`number`	Maximum number of characters that may be entered.
`onText?`	`EventHandler<string>`	Fired when the entered text changes.
`secureMode?`	`boolean`	When true, entered characters are masked.
`showUnderscores?`	`boolean`	Shows underscore placeholders for each digit position.
`text?`	`string`	Current PIN/text value.
`textColor?`	`string`	Color of the entered text.

Extends IGroupProps.

Description

Parameters

Types

IDynamicPinPadProps

Example

What’s Next