ink-text-input

Install the ink-text-input package via npm to use the text input component in your Ink applications.

npm install ink-text-input

If you don't want to manage the input state manually, use the UncontrolledTextInput component. It handles internal value changes for you. To access the final input value, provide a function to the onSubmit prop, which is triggered when the user presses Enter. You can set an initial value using the initialValue prop.

import React from 'react';
import {render, Box, Text} from 'ink';
import {UncontrolledTextInput} from 'ink-text-input';

const SearchQuery = () => {
	const handleSubmit = query => {
		// Do something with query
	};

	return (
		<Box>
			<Box marginRight={1}>
				<Text>Enter your query:</Text>
			</Box>

			<UncontrolledTextInput onSubmit={handleSubmit} />
		</Box>
	);
};

render(<SearchQuery />);

You can use TextInput as a controlled component by managing the value state in your parent component and updating it via the onChange prop. This is the standard way to keep your application state in sync with the input.

import React, {useState} from 'react';
import {render, Box, Text} from 'ink';
import TextInput from 'ink-text-input';

const SearchQuery = () => {
	const [query, setQuery] = useState('');

	return (
		<Box>
			<Box marginRight={1}>
				<Text>Enter your query:</Text>
			</Box>

			<TextInput value={query} onChange={setQuery} />
		</Box>
	);
};

render(<SearchQuery />);

Use the mask prop to replace all characters in the input with a specific character. This is useful for creating password fields.

<TextInput value="Hello" mask="*" />
//=> "*****"

The TextInput component is a controlled component for handling text input in Ink applications. You must manage the value state yourself and provide an onChange callback to update it. It supports features like masking (for passwords), custom placeholders, and cursor visibility.

import React, { useState } from 'react';
import TextInput from 'ink-text-input';

const Example = () => {
	const [text, setText] = useState('');

	return (
		<TextInput
			value={text}
			onChange={setText}
			onSubmit={(value) => console.log('Submitted:', value)}
		/>
	);
};

The TextInput component accepts the following props:

The UncontrolledTextInput component extends the standard Props but replaces the required value and onChange with an optional initialValue.