Keyboard

An on-screen keyboard component for text input on TV interfaces with spatial navigation support.

Import

import { Keyboard } from '@smart-tv/ui';

Basic Usage

Create a basic on-screen keyboard for text input.

const [value, setValue] = useState('');

<Keyboard
  focusKey="search-keyboard"
  value={value}
  onChange={setValue}
  onSubmit={(text) => handleSearch(text)}
  placeholder="Search for movies..."
/>

Keyboard Layouts

Switch between different keyboard layouts.

// QWERTY Layout (default)
<Keyboard
  focusKey="qwerty-kb"
  layout="qwerty"
  value={value}
  onChange={setValue}
/>

// ABC Layout
<Keyboard
  focusKey="abc-kb"
  layout="abc"
  value={value}
  onChange={setValue}
/>

// Numeric Layout
<Keyboard
  focusKey="numeric-kb"
  layout="numeric"
  value={value}
  onChange={setValue}
/>

With Auto-complete

Add autocomplete suggestions for faster text input.

const [value, setValue] = useState('');
const [suggestions, setSuggestions] = useState([]);

const handleChange = (text) => {
  setValue(text);
  // Fetch suggestions based on input
  const matches = searchSuggestions(text);
  setSuggestions(matches);
};

<Keyboard
  focusKey="autocomplete-kb"
  value={value}
  onChange={handleChange}
  suggestions={suggestions}
  onSuggestionSelect={(suggestion) => setValue(suggestion)}
/>

Custom Theme

Customize the keyboard appearance with themes.

<Keyboard
  focusKey="themed-kb"
  value={value}
  onChange={setValue}
  theme={{
    background: 'bg-gray-900',
    key: 'bg-gray-800 text-white',
    keyActive: 'bg-blue-600 scale-110',
    keyHover: 'bg-gray-700'
  }}
/>

Props

Prop	Type	Default	Description
focusKey	string	required	Unique identifier
value	string	''	Current input value
onChange	function	-	Value change handler
onSubmit	function	-	Submit handler
layout	string	qwerty	Keyboard layout type
placeholder	string	-	Input placeholder text
suggestions	array	[]	Autocomplete suggestions
theme	object	-	Custom theme configuration

Best Practices

Show the keyboard in a modal or drawer for better focus management
Provide autocomplete suggestions to reduce typing effort
Use appropriate layouts based on input type (numeric for numbers, etc.)
Make keys large enough for easy navigation with remote control
Display the current input value clearly above the keyboard
Provide clear visual feedback for key presses