ink-select-input

Install the package using npm to use the select input component in your Ink applications.

npm install ink-select-input

To use SelectInput, provide an array of items (each containing a label and value) and an onSelect callback. Users can navigate using arrow keys, j/k keys, or number keys, and select an item by pressing return.

import React from 'react';
import {render} from 'ink';
import SelectInput from 'ink-select-input';

const Demo = () => {
	const handleSelect = item => {
		// `item` = { label: 'First', value: 'first' }
	};

	const items = [
		{
			label: 'First',
			value: 'first'
		},
		{
			label: 'Second',
			value: 'second'
		},
		{
			label: 'Third',
			value: 'third'
		}
	];

	return <SelectInput items={items} onSelect={handleSelect} />;
};

render(<Demo />);

The items prop defines the list of options displayed to the user. Each item must be an object with the following structure:

• label (required): The text displayed in the list.
• value (required): The value associated with the item.
• key (optional): A unique key for the item. If not provided, value is used as the key.

You can override the default visual elements of the SelectInput using the following props:

• indicatorComponent (Component): A custom component to replace the default selection indicator.
• itemComponent (Component): A custom component to replace the default rendering of individual items.

The default export from this package is the SelectInput component. It is the primary component used to create a selectable list in an Ink application.

import SelectInput from 'ink-select-input';

// Use <SelectInput /> within your Ink component tree

The SelectInput component renders a selectable list in an Ink terminal application. It supports keyboard navigation (up/down arrows or 'j'/'k' keys), selection via the Enter key, and direct selection using number keys (1-9) for visible items.

Key features:

• Navigation: Use arrow keys or j/k to move the highlight.
• Selection: Press Enter to select the highlighted item, or press a number 1-9 to select a visible item directly.
• Focus Control: Use the isFocused prop to enable or disable input listening, which is useful when multiple input components exist in the same terminal interface.

import SelectInput from 'ink-select-input';

const items = [
  { label: 'Option 1', value: 'opt1' },
  { label: 'Option 2', value: 'opt2' },
];

<SelectInput 
  items={items} 
  onSelect={(item) => console.log('Selected:', item.value)} 
/>