CustomKeyboard

Voice-enabled keyboard with a custom layout defined by a Key Definition File

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

CustomKeyboard(props: IKeyboardPropsWithVoice): JSX.Element

Description

Voice-enabled keyboard with a custom layout defined by a Key Definition File.

CustomKeyboard extends the native DynamicCustomKeyboard node, combining a DynamicKeyGrid (custom KDF layout) with a VoiceTextEditBox for text and voice entry. Use this for standalone on-screen keyboards outside of StandardDialog.

Parameters

Name	Type	Description
`props`	IKeyboardPropsWithVoice

Example

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

<CustomKeyboard
  keyDefinitionUri={CustomAddressKDF}
  domain={KeyboardDomain.GENERIC}
  text={query()}
  hintText="Type here…"
  maxTextLength={64}
  showUnderscores={false}
  onText={setQuery}
  gainFocus
  id="keyboard"
  translation={[80, 140]}
/>

Types

IKeyboardPropsWithVoice

Full props for CustomKeyboard: DynamicKeyboardBase key-grid fields plus VoiceTextEditBox text-entry fields.

type IKeyboardPropsWithVoice = IDynamicKeyboardBaseProps & Partial<IVoiceTextEditBoxProps>;

IDynamicKeyboardBaseProps

Properties inherited from DynamicKeyboardBase (key grid + text box behavior).

Name	Type	Description
`centerUnderscores?`	`boolean`	Centers underscore placeholders within the text edit box.
`disableVoiceUnderscoreControl?`	`boolean`	Disables voice underscore control in the text edit box.
`domain?`	`KeyboardDomain`	Speech-recognition domain for voice entry.
`hideTextBox?`	`boolean`	When true, hides the internal VoiceTextEditBox.
`initText?`	`string`	Initial text pre-populated in the edit box on mount.
`showUnderscores?`	`boolean`	Shows underscore placeholders in the text edit box.

Extends IDynamicKeyGridNodeProps.

IKeyboardRSGPaletteNodeProps

Color palette for keyboard key grid rendering.

Name	Type	Description
`colors`	`PaletteColors`

IDynamicKeyGridNodeProps

Properties for the internal DynamicKeyGrid sub-node on CustomKeyboard.

Not for standalone DynamicKeyGrid — use IDynamicKeyGridProps instead.

Name	Type	Description
`disableKey?`	`string`	Key label to disable in the current layout.
`enableKey?`	`string`	Key label to re-enable in the current layout.
`focusVisible?`	`boolean`	When true, focus highlight is visible on the key grid.
`horizWrap?`	`boolean`	When true, horizontal navigation wraps at row edges.
`jumpToKey?`	`number[]`	Jump focus to a specific key grid position `[row, col]`.
`keyDefinitionUri?`	`string`	URI of the Key Definition File that defines the keyboard layout. Required for DynamicCustomKeyboard; set to a packaged `.keyboard.json` file.
`mode?`	`string`	Active keyboard mode (must match a mode defined in the KDF).
`onKeyFocused?`	`EventHandler<string>`	Fired when keyboard focus moves to a different key.
`onKeySelectedValue?`	`EventHandler<IKeyHandlerData>`	Fired when a key is selected, with key name and press state.
`palette?`	`Component<IKeyboardRSGPaletteNodeProps>`	Color palette node for keyboard theming.
`vertWrap?`	`boolean`	When true, vertical navigation wraps at column edges.

Extends IGroupProps.