StandardKeyboardDialog

Displays a keyboard dialog for text and voice entry of alphanumeric characters and symbols

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

StandardKeyboardDialog(props: IStandardKeyboardDialogProps): JSX.Element

Description

Displays a keyboard dialog for text and voice entry of alphanumeric characters and symbols.

StandardKeyboardDialog is a pre-built dialog similar to the legacy KeyboardDialog node, but includes voice entry functionality through its internal DynamicKeyboard node.

The keyboardDomain property controls how voice input is processed:

"generic": full word input for search queries
"email": letter-by-letter for email addresses
"password": letter-by-letter for passwords
"numeric": letter-by-letter for PINs and zip codes
"alphanumeric": letter-by-letter for street addresses

Parameters

Name	Type	Description
`props`	IStandardKeyboardDialogProps

Example

const [showKeyboard, setShowKeyboard] = createSignal(false);
const [searchText, setSearchText] = createSignal("");

{showKeyboard() && (
    <StandardKeyboardDialog
        title="Search"
        message={["Enter your search query:"]}
        keyboardDomain="generic"
        text={searchText()}
        buttons={["Search", "Cancel"]}
        // onText fires on every keystroke with the full current string
        onText={(text) => {
            setSearchText(text);
            console.log("Live input:", text);
        }}
        onButtonSelected={(index) => {
            if (index === 0) {
                console.log("Searching for:", searchText());
            }
            setShowKeyboard(false);
        }}
        onWasClosed={() => setShowKeyboard(false)}
    />
)}

Types

IStandardKeyboardDialogProps

Properties for the StandardKeyboardDialog component.

Extends IStandardDialogProps with keyboard-specific fields for text 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.
`keyboardDomain?`	`IKeyboardDomain`	The type of text to be entered. See below.
`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.
`onText?`	`EventHandler<string>`	Fired whenever the text in the keyboard's text edit box changes (on each keystroke). See below.
`text?`	`string`	The default string displayed in the keyboard's text edit box. Updated with the currently entered string as the user types.
`title?`	`string`	The title displayed at the top of the dialog.

Extends IStandardDialogProps.

IStandardKeyboardDialogProps.keyboardDomain

The type of text to be entered. Used by the keyboard to modify voice entry method and determine when a valid string has been entered.

"email": letter-by-letter dictation for emails
"numeric": letter-by-letter dictation for PIN codes, zip codes
"alphanumeric": letter-by-letter dictation for addresses
"generic": full word input for search queries (default)
"password": letter-by-letter dictation for passwords

IStandardKeyboardDialogProps.onText

Fired whenever the text in the keyboard's text edit box changes (on each keystroke). The handler receives the full current string entered by the user.

Use this to react to live input — for example to validate input, update a search suggestion list, or enable/disable action buttons based on what the user has typed so far.

IKeyboardDomain

Keyboard input domain type for StandardKeyboardDialog.

type IKeyboardDomain = "email" | "numeric" | "alphanumeric" | "generic" | "password";