TextInput Stable WINMACLNX

A native text input. Always controlled — you manage the value via state.

Import

import { TextInput } from 'veloxkit'

Basic usage

const [value, setValue] = useState('')
 
<TextInput
  value={value}
  onChangeText={setValue}
  placeholder="Type something..."
  style={{
    padding: '10px 14px',
    background: '#14141A',
    borderRadius: 6,
    borderWidth: 1,
    borderColor: '#2A2A3A',
    color: '#F0F0F2',
    fontSize: 15,
  }}
/>

Props

Prop	Type	Default	Description
`value`	`string`	—	Controlled value (required)
`onChangeText`	`(text: string) => void`	—	Called on every keystroke
`onSubmitEditing`	`() => void`	—	Called on Enter
`placeholder`	`string`	—	Placeholder text
`placeholderTextColor`	`string`	`#666677`	Placeholder color
`secureTextEntry`	`boolean`	`false`	Password field
`multiline`	`boolean`	`false`	Multi-line mode
`numberOfLines`	`number`	`1`	Initial height in multi-line mode
`autoFocus`	`boolean`	`false`	Focus on mount
`disabled`	`boolean`	`false`	Disables editing
`maxLength`	`number`	—	Max character count
`keyboardType`	`'default' \| 'number-pad' \| 'email-address'`	`'default'`	Input type hint
`style`	`TextInputStyle`	`{}`	Styles

Ref and focus

const inputRef = useRef<TextInputRef>(null)
 
<TextInput ref={inputRef} value={value} onChangeText={setValue} />
 
// Focus programmatically
inputRef.current?.focus()
inputRef.current?.blur()
inputRef.current?.select()  // select all text

Multi-line

<TextInput
  multiline
  numberOfLines={4}
  value={body}
  onChangeText={setBody}
  style={{ padding: 12, minHeight: 100 }}
/>

Pressable ScrollView