Comprehensive input handling for text input, keyboard interactions, and user data entry in 2D GUI systems.
Text input controls for single-line and multi-line text entry.
class InputText extends Control {
text: string;
placeholderText: string;
maxWidth: string | number;
focusedBackground: string;
background: string;
thickness: number;
margin: ValueAndUnit;
autoStretchWidth: boolean;
outlineWidth: number;
outlineColor: string;
promptMessage: string;
disableMobilePrompt: boolean;
onFocusSelectAll: boolean;
onTextChangedObservable: Observable<InputText>;
onFocusObservable: Observable<InputText>;
onBlurObservable: Observable<InputText>;
onKeyboardEventProcessedObservable: Observable<IKeyboardEvent>;
onBeforeKeyAddObservable: Observable<InputText>;
focus(): void;
blur(): void;
processKeyboard(evt: IKeyboardEvent): void;
}
class InputTextArea extends InputText {
maxHeight: string | number;
autoStretchHeight: boolean;
resize: boolean;
}
class InputPassword extends InputText {
passwordChar: string;
}Usage Examples:
import { AdvancedDynamicTexture, InputText, InputTextArea } from "@babylonjs/gui";
// Create fullscreen GUI
const advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("UI");
// Single-line text input
const inputText = new InputText();
inputText.width = "200px";
inputText.height = "40px";
inputText.text = "";
inputText.placeholderText = "Enter your name...";
inputText.color = "white";
inputText.background = "black";
// Handle text changes
inputText.onTextChangedObservable.add((textInput) => {
console.log("Text changed:", textInput.text);
});
// Multi-line text area
const textArea = new InputTextArea();
textArea.width = "300px";
textArea.height = "100px";
textArea.autoStretchHeight = true;
textArea.text = "";
textArea.placeholderText = "Enter description...";
advancedTexture.addControl(inputText);
advancedTexture.addControl(textArea);On-screen keyboard control for touch interfaces and custom input systems.
class VirtualKeyboard extends StackPanel {
static CreateDefaultLayout(): VirtualKeyboard;
static CreateNumericKeyboard(): VirtualKeyboard;
defaultButtonWidth: string;
defaultButtonHeight: string;
defaultButtonPaddingLeft: string;
defaultButtonPaddingRight: string;
defaultButtonPaddingTop: string;
defaultButtonPaddingBottom: string;
defaultButtonColor: string;
defaultButtonBackground: string;
shiftButtonColor: string;
selectedShiftThickness: number;
shiftState: number;
onKeyPressObservable: Observable<string>;
connect(input: InputText): void;
disconnect(): void;
addKeysRow(keys: Array<string>, propertySets?: Array<KeyPropertySet>): void;
applyShiftState(shiftState: number): void;
}
class KeyPropertySet {
width?: string;
height?: string;
paddingLeft?: string;
paddingRight?: string;
paddingTop?: string;
paddingBottom?: string;
color?: string;
background?: string;
}Usage Examples:
import { VirtualKeyboard, InputText } from "@babylonjs/gui";
// Create input text
const inputText = new InputText();
inputText.width = "400px";
inputText.height = "40px";
inputText.top = "-200px";
// Create default virtual keyboard
const keyboard = VirtualKeyboard.CreateDefaultLayout();
keyboard.verticalAlignment = Control.VERTICAL_ALIGNMENT_BOTTOM;
keyboard.paddingBottom = "10px";
// Connect keyboard to input
keyboard.connect(inputText);
// Handle key presses
keyboard.onKeyPressObservable.add((key) => {
console.log("Key pressed:", key);
});
// Add both to GUI
advancedTexture.addControl(inputText);
advancedTexture.addControl(keyboard);
// Create custom numeric keyboard
const numKeyboard = VirtualKeyboard.CreateNumericKeyboard();
numKeyboard.verticalAlignment = Control.VERTICAL_ALIGNMENT_BOTTOM;Checkbox and radio button controls for boolean and group selection.
class Checkbox extends Control {
isChecked: boolean;
checkSizeRatio: number;
background: string;
checkColor: string;
onIsCheckedChangedObservable: Observable<boolean>;
}
class RadioButton extends Control {
isChecked: boolean;
group: string;
checkSizeRatio: number;
background: string;
checkColor: string;
onIsCheckedChangedObservable: Observable<boolean>;
}Usage Examples:
import { Checkbox, RadioButton, TextBlock, StackPanel } from "@babylonjs/gui";
// Checkbox example
const checkbox = new Checkbox();
checkbox.width = "20px";
checkbox.height = "20px";
checkbox.isChecked = false;
checkbox.color = "green";
const checkboxLabel = new TextBlock();
checkboxLabel.text = "Enable notifications";
checkboxLabel.left = "30px";
// Radio button group
const radioGroup = new StackPanel();
radioGroup.isVertical = true;
const option1 = new RadioButton();
option1.width = "20px";
option1.height = "20px";
option1.group = "options";
option1.isChecked = true;
const option2 = new RadioButton();
option2.width = "20px";
option2.height = "20px";
option2.group = "options";
// Handle selection changes
checkbox.onIsCheckedChangedObservable.add((value) => {
console.log("Checkbox changed:", value);
});
option1.onIsCheckedChangedObservable.add((value) => {
if (value) console.log("Option 1 selected");
});Color selection control with visual color wheel interface.
class ColorPicker extends Control {
value: Color3;
size: string | number;
onValueChangedObservable: Observable<Color3>;
}Usage Examples:
import { ColorPicker, Color3 } from "@babylonjs/gui";
// Create color picker
const colorPicker = new ColorPicker();
colorPicker.value = Color3.Red();
colorPicker.size = "150px";
colorPicker.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
// Handle color changes
colorPicker.onValueChangedObservable.add((color) => {
console.log("Color changed:", color.r, color.g, color.b);
// Apply color to material or other objects
});
advancedTexture.addControl(colorPicker);Input controls use Observable patterns for event handling, providing type-safe event subscriptions for various user interactions including text changes, focus events, and value selections.
All input controls include built-in support for touch interfaces, with mobile-specific features like customizable prompt messages and virtual keyboard integration for optimal mobile user experience.