Input

const Input: ForwardRefExoticComponent<InputProps & RefAttributes<InputHandle>>;

Text input with full keyboard editing, cursor navigation, and optional masking.

Supports both controlled (value + onChange) and uncontrolled (defaultValue) modes. Multiline editing is opt-in via the multiline prop.

Keyboard shortcuts (when focused):

Key	Action
← / →	Move cursor
Home / End	Start / end of line
Ctrl+A / Ctrl+E	Start / end of line
Ctrl+W	Delete word backward
Ctrl+K	Delete to end of line
Alt+← / Alt+→	Move by word
Alt+Backspace	Delete word backward
Up / Down	Navigate visual lines (multiline / wrapped)

Examples

const [name, setName] = useState("");

<Input
  value={name}
  onChange={setName}
  placeholder="Your name"
  style={{ border: "round", paddingX: 1 }}
  focusedStyle={{ borderColor: "cyan" }}
/>

// Masked phone input
import { masks } from "@semos-labs/glyph";

<Input
  value={phone}
  onChange={setPhone}
  onBeforeChange={masks.usPhone}
  placeholder="(555) 555-5555"
/>

---

Properties

Property	Type	Description
autoFocus?	boolean	Automatically focus this input when mounted.
defaultValue?	string	Initial value for uncontrolled mode (ignored when value is provided).
focusedStyle?	Style	Style when focused (merged with style).
multiline?	boolean	Enable multiline editing (Enter inserts newlines, Up/Down navigate lines).
onBeforeChange?	(newValue, oldValue) => string | false | void	Called before a value change is applied. Useful for input masking/validation.
onChange?	(value) => void	Callback fired whenever the text value changes.
onKeyPress?	(key) => boolean | void	Called on every key press. Return true to prevent default handling.
placeholder?	string	Text shown when the input is empty.
style?	Style	Base style for the input container.
type?	InputType	Input type for validation: - “text” (default): accepts any character - “number”: only accepts digits, decimal point, and minus sign
value?	string	Controlled value. Pair with onChange to manage state externally.

---

InputType

type InputType = "text" | "number";

Input type for value validation.

---

InputHandle

Handle for Input — exposes current value

Extends

• FocusableHandle

Methods

blur()

blur(): void;

Programmatically blur (unfocus) this element

Returns

void

Inherited from

FocusableHandle.blur

---

focus()

focus(): void;

Programmatically focus this element

Returns

void

Inherited from

FocusableHandle.focus

---

scrollIntoView()

scrollIntoView(options?): void;

Scroll the nearest parent ScrollView to make this element visible. Behaves like the DOM Element.scrollIntoView() method. No-op if the element is not inside a ScrollView.

Parameters

Parameter	Type	Description
options?	ScrollIntoViewOptions	Alignment options (default: { block: "nearest" })

Returns

void

Example

const inputRef = useRef<InputHandle>(null);

// Minimal scroll — just enough to make it visible
inputRef.current?.scrollIntoView();

// Center the element in the viewport
inputRef.current?.scrollIntoView({ block: "center" });

Inherited from

FocusableHandle.scrollIntoView

Properties

Property	Modifier	Type	Description	Inherited from
isFocused	readonly	boolean	Whether this element is currently focused	FocusableHandle.isFocused
value	readonly	string	Current text value	-