# ink-multi-select

> Multi select input component for Ink

Latest version **2.0.0** (published 2020-09-28) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2020-09-28 |
| First published | 2019-04-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8 |
| Dependencies | 4 |
| Unpacked size | 20.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 31 |
| Author | George Karagkiaouris |
| Maintainers | gkaragkiaouris |
| Keywords | ink, ink-component, select, multi-select, checkbox |

## Links

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

## Dependencies (4)

- [figures](https://npm.io/package/figures.md) ^2.0.0
- [arr-rotate](https://npm.io/package/arr-rotate.md) ^1.0.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [lodash.isequal](https://npm.io/package/lodash.isequal.md) ^4.5.0

## Recent versions

- 2.0.0 (latest) — 2020-09-28
- 1.1.2 — 2020-02-05
- 1.1.0 — 2019-11-27
- 1.0.3 — 2019-04-03
- 1.0.2 — 2019-04-03
- 1.0.1 — 2019-04-03
- 1.0.0 — 2019-04-03

## README

# ink-multi-select [![Build Status](https://travis-ci.org/karaggeorge/ink-multi-select.svg?branch=master)](https://travis-ci.org/karaggeorge/ink-multi-select)

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

Based on [ink-select-input](https://github.com/vadimdemedes/ink-select-input)

## Install

```
$ npm install ink-multi-select
```


## Usage

```jsx
import React from 'react';
import {render} from 'ink';
import MultiSelect from 'ink-multi-select';

const Demo = () => {
	const handleSubmit = items => {
		// `items` = [{ label: 'First', value: 'first' }, { label: 'Third', value: 'third' }]
	};

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

	return <MultiSelect items={items} onSubmit={handleSubmit}/>
};

render(<Demo/>);
```

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


## Props

### items

Type: `array`<br>
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.

### selected

Type: `array`<br>
Default: `undefined`

List of the selected items. If `undefined`, the component will be **uncontrolled** and will store internally selected items.

### defaultSelected

Type: `array`<br>
Default: `[]`

List of initial selected items (this works only when `selected` is `undefined`).

### focus

Type: `boolean`<br>
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.

### onSelect

Type: `function`

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

### onUnselect

Type: `function`

Function to call when user unselects 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.

### onSubmit

Type: `function`

Function to call when user submits the selected list. Array of Item objects is passed to that function as an argument.

### indicatorComponent

Type: `Component`

Custom component to override the default indicator component.

### checkboxComponent

Type: `Component`

Custom component to override the default check-box component.

### itemComponent

Type: `Component`

Custom component to override the default item component.

### limit

Type: `number`

Number of items to display.


## License

MIT © [George Karagkiaouris](http://github.com/karaggeorge)

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