Ink UI

You can provide an array of strings to the suggestions prop to enable autocomplete. As the user types, TextInput performs a case-sensitive search for the first item in the array that begins with the current input string. When the user presses <kbd>enter</kbd>, the matching suggestion replaces the current input value.

import React, {useState} from 'react';
import {render, Box, Text} from 'ink';
import {TextInput} from '@inkjs/ui';

function Example() {
	const [value, setValue] = useState('');

	return (
		<Box flexDirection="column" gap={1}>
			<TextInput
				placeholder="Start typing..."
				suggestions={['Abby', 'Angel', 'Annie']}
				onChange={setValue}
			/>

			<Text>Input value: "{value}"</Text>
		</Box>
	);
}

render(<Example />);

The ProgressBar component is an extended version of the Spinner that allows you to visualize progress as a percentage. It is rendered within a container (like an Ink Box) to control its width.

To use it, provide a value prop representing the current progress percentage.

import React, {useEffect, useState} from 'react';
import {render, Box} from 'ink';
import {ProgressBar} from '@inkjs/ui';

function Example() {
	const [progress, setProgress] = useState(0);

	useEffect(() => {
		if (progress === 100) {
			return;
		}

		const timer = setTimeout(() => {
			setProgress(progress + 1);
		}, 50);

		return () => {
			clearInterval(timer);
		};
	}, [progress]);

	return (
		<Box width={30}>
			<ProgressBar value={progress} />
		</Box>
	);
}

render(<Example />);

EmailInput is an uncontrolled component used for entering email addresses. It features automatic domain suggestions once the @ character is typed. You can track changes in real-time using the onChange prop or capture the final value when the user presses <kbd>enter</kbd> using the onSubmit prop.

import React, {useState} from 'react';
import {render, Box, Text} from 'ink';
import {EmailInput} from '@inkjs/ui';

function Example() {
	const [value, setValue] = useState('');

	return (
		<Box flexDirection="column" gap={1}>
			<EmailInput placeholder="Enter email..." onChange={setValue} />
			<Text>Input value: "{value}"</Text>
		</Box>
	);
}

render(<Example />);

Install the Ink UI component collection using npm. This package requires Ink to be already set up in your project. For a quick start, you can use create-ink-app.

npm install @inkjs/ui

The PasswordInput component is used for entering sensitive data like passwords or API keys. It masks the input value with asterisks (*). It is an uncontrolled component, meaning you manage its state by listening to value changes via the onChange or onSubmit props.

import React, {useState} from 'react';
import {render, Box, Text} from 'ink';
import {PasswordInput} from '@inkjs/ui';

function Example() {
	const [value, setValue] = useState('');

	return (
		<Box flexDirection="column" gap={1}>
			<PasswordInput placeholder="Enter password..." onChange={setValue} />
			<Text>Input value: "{value}"</Text>
		</Box>
	);
}

render(<Example />);

If you only need the final value once the user has finished typing and presses <kbd>enter</kbd>, use the onSubmit prop instead of onChange. This is useful for form submissions or sequential input flows.

import React, {useState} from 'react';
import {render, Box, Text} from 'ink';
import {TextInput} from '@inkjs/ui';

function Example() {
	const [value, setValue] = useState('');

	return (
		<Box flexDirection="column" gap={1}>
			<TextInput placeholder="Start typing..." onSubmit={setValue} />
			<Text>Input value: "{value}"</Text>
		</Box>
	);
}

render(<Example />);

If you only need the final value once the user presses <kbd>enter</kbd>, use the onSubmit prop instead of onChange. This prevents continuous updates during typing and only triggers the callback when the input is submitted.

import React, {useState} from 'react';
import {render, Box, Text} from 'ink';
import {PasswordInput} from '@inkjs/ui';

function Example() {
	const [value, setValue] = useState('');

	return (
		<Box flexDirection="column" gap={1}>
			<PasswordInput placeholder="Enter password..." onSubmit={setValue} />
			<Text>Input value: "{value}"</Text>
		</Box>
	);
}

render(<Example />);

The StatusMessage component is used to display status indicators, particularly when a longer explanation of a status is required. You can customize the visual style of the message using the variant prop to change its color based on the status type.

import React from 'react';
import {render, Box} from 'ink';
import {StatusMessage} from '@inkjs/ui';

function Example() {
	return (
		<Box flexDirection="column" padding={2}>
			<StatusMessage variant="success">Success</StatusMessage>
			<StatusMessage variant="error">Error</StatusMessage>
			<StatusMessage variant="warning">Warning</StatusMessage>
			<StatusMessage variant="info">Info</StatusMessage>
		</Box>
	);
}

render(<Example />);