# ink-select-input

> Select input component for Ink

Latest version **6.2.0** (published 2025-04-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install ink-select-input
pnpm add ink-select-input
yarn add ink-select-input
bun add ink-select-input
```

## Health

**Score 38/100 (D)** — status: maintenance-mode.

Positive: has types package; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.2.0 |
| Published | 2025-04-29 |
| First published | 2017-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/ink-select-input) |
| Module format | ESM |
| Node | >=18 |
| Dependencies | 2 |
| Unpacked size | 17.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 169 |
| Author | Vadim Demedes |
| Maintainers | vdemedes, sindresorhus |
| Keywords | ink, ink-component |

## Links

- npm: https://www.npmjs.com/package/ink-select-input
- Repository: https://github.com/vadimdemedes/ink-select-input
- Homepage: https://github.com/vadimdemedes/ink-select-input#readme
- Issues: https://github.com/vadimdemedes/ink-select-input/issues
- npm.io page: https://npm.io/package/ink-select-input

## Dependencies (2)

- [figures](https://npm.io/package/figures.md) ^6.1.0
- [to-rotated](https://npm.io/package/to-rotated.md) ^1.0.0

## Recent versions

- 6.2.0 (latest) — 2025-04-29
- 6.1.0 — 2025-04-18
- 6.0.0 — 2024-05-22
- 5.0.0 — 2023-03-01
- 4.2.2 — 2023-03-01
- 4.2.1 — 2021-11-13
- 4.2.0 — 2020-10-04
- 4.1.0 — 2020-09-20
- 4.0.0 — 2020-07-22
- 3.1.2 — 2019-07-28
- 3.1.1 — 2019-05-05
- 3.1.0 — 2019-03-14
- 3.0.2 — 2019-03-09
- 3.0.1 — 2019-03-05
- 3.0.0 — 2019-03-04
- … 3 more at https://npm.io/package/ink-select-input/versions

## README

# ink-select-input [![test](https://github.com/vadimdemedes/ink-select-input/workflows/test/badge.svg)](https://github.com/vadimdemedes/ink-select-input/actions)

> Select input component for [Ink](https://github.com/vadimdemedes/ink)

## Install

```sh
npm install ink-select-input
```

## Usage

```jsx
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 user can navigate using arrow up/down keys or the <kbd>j</kbd> <kbd>k</kbd> keys, then press <kbd>return</kbd> to select. Alternatively, press the number key corresponding to an option to select it instantly.

<img src="media/demo.gif" width="508">

## Props

### items

Type: `array`\
Default: `[]`

Items to display in a list. Each item must be an object and have `label` and `value` props, it may also optionally have a `key` prop.
If no `key` prop is provided, `value` will be used as the item key.

### isFocused

Type: `boolean`\
Default: `true`

Listen to user's input. Useful in case there are multiple input components at the same time and input must be "routed" to a specific component.

### initialIndex

Type: `number`\
Default: `0`

Index of initially-selected item in `items` array.

### limit

Type: `number`

Number of items to display.

### indicatorComponent

Type: `Component`

Custom component to override the default indicator component.

### itemComponent

Type: `Component`

Custom component to override the default item component.

### onSelect

Type: `function`

Function to call when user selects an item. Item object is passed to that function as an argument.

### onHighlight

Type: `function`

Function to call when user highlights an item. Item object is passed to that function as an argument.

---
_Source: https://npm.io/package/ink-select-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._