TextInput Stable WINMACLNX

A native text input. Always controlled — you manage the value via state. Supports caret-follow panning (single-line), auto-growing height (multiline), masking, numeric filtering, character limits, keyboard navigation, and mouse drag selection.

Import

import { TextInput, PasswordInput, NumericInput } from '@glyx-dev/react'

Basic usage

const [value, setValue] = useState('')
 
<TextInput
  value={value}
  onChangeText={setValue}
  placeholder="Type something..."
/>

Props

Prop	Type	Default	Description
`value`	`string`	`''`	Controlled value
`onChangeText`	`(text: string) => void`	—	Called on every accepted edit
`onSubmitEditing`	`(text: string) => void`	—	Called on Enter (single-line only)
`placeholder`	`string`	`''`	Shown when unfocused and empty
`fontSize`	`number`	`16`	Text size
`multiline`	`boolean`	`false`	Multi-line mode (Enter inserts `\n`)
`width`	`number`	`240`	Base width — flex/stretch styles override it; panning and wrapping always use the real laid-out width
`height`	`number`	`44` / auto	Explicit height. Multiline default: auto-sized between `minLines` and `maxLines`
`minLines`	`number`	`3`	Multiline auto-height floor (in lines)
`maxLines`	`number`	`10`	Multiline auto-height ceiling — the field grows with content between the two
`maxLength`	`number`	—	Hard character limit; typing/paste beyond it is truncated
`secureTextEntry`	`boolean`	`false`	Mask every character (password entry)
`keyboardType`	`'default' \| 'numeric' \| 'decimal'`	`'default'`	Input filter: `numeric` = integers, `decimal` = one dot allowed
`style`	`GlyxStyle`	`{}`	Container styles (merged over the built-in input chrome)

Interaction model

Caret-follow panning (single-line): typing past the right edge pans old characters out of view; deleting pans back. Click positions the caret even in the panned region.
Mouse selection: click sets the anchor, drag extends the selection — in both single-line and multiline fields.
Keyboard: arrows (+Shift to select), Home/End, Ctrl+A/C/X/V, Backspace/Delete on selections, Up/Down across lines in multiline.
Multiline caret blinks on the correct visual line, including soft-wrapped lines.

Multiline

<TextInput
  multiline
  minLines={3}
  maxLines={12}
  value={body}
  onChangeText={setBody}
  placeholder="Details…"
/>

Without an explicit height, the field renders minLines tall and grows with content (counting both newlines and soft wraps at the real field width) up to maxLines.

PasswordInput

Single-line TextInput with secureTextEntry forced on — characters render as •, and caret/click/selection all track the masked glyph widths.

<PasswordInput value={pw} onChangeText={setPw} maxLength={64} />

NumericInput

Single-line TextInput that only accepts numbers. Defaults to keyboardType: 'decimal' (digits, one dot, leading minus); pass keyboardType: 'numeric' for integers only. Invalid keystrokes and pastes are rejected outright.

<NumericInput value={amount} onChangeText={setAmount} keyboardType="numeric" />