TextInput

A controlled text input for terminal apps. Supports block cursor, arrow-key cursor movement, backspace, placeholder text, and password masking.

Live Preview

TextInput · controlled
? Project name
❯ █

~/my-cli — node v22● running

Installation

npx inkui add text-input

Usage

import { useState } from 'react';
import { TextInput } from './components/ui/text-input';
 
export default function App() {
  const [name, setName] = useState('');
 
  return (
    <TextInput
      label="Name"
      value={name}
      onChange={setName}
      onSubmit={(v) => console.log('submitted:', v)}
      placeholder="Enter your name"
    />
  );
}

Examples

Basic

const [value, setValue] = useState('');
<TextInput value={value} onChange={setValue} />

With label and placeholder

<TextInput
  label="Email"
  value={email}
  onChange={setEmail}
  placeholder="you@example.com"
/>

Password mode

<TextInput
  label="Password"
  value={password}
  onChange={setPassword}
  password
/>

Multi-field form

const [step, setStep] = useState<'name' | 'email' | 'done'>('name');
 
<TextInput
  label="Name "
  value={name}
  onChange={setName}
  onSubmit={() => setStep('email')}
  focus={step === 'name'}
/>
<TextInput
  label="Email"
  value={email}
  onChange={setEmail}
  onSubmit={() => setStep('done')}
  focus={step === 'email'}
/>

Props

Prop	Type	Default	Description
`value`	`string`	—	Controlled value (required)
`onChange`	`(v: string) => void`	—	Called on every keystroke (required)
`onSubmit`	`(v: string) => void`	`undefined`	Called when Enter is pressed
`placeholder`	`string`	`''`	Shown when value is empty
`password`	`boolean`	`false`	Mask characters as `*`
`focus`	`boolean`	`true`	Whether this input captures keyboard input
`label`	`string`	`undefined`	Optional label to the left
`theme`	`InkUITheme`	`darkTheme`	Color theme

On this page